I want to create an app that help user search great dining places in the city so that they can revisit again in the future. This app is my first fun project using leaflet. What i wish to do is to make the simple map and load marker from database in which the marker only appears when user query the places from category or search in the search bar. I did test the index pageand marker.js in JSFiddle but it only appears the map-wrap alongside search button, bar and category.
Marker.js
//now map reference the global map declared in the first line
map=L.map('map').setView(true)
//marker development
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data ©<a href="http://openstreetmap.org">OpenStreetMap</a>
contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
maxZoom:18
}).addTo(map);
newMarkerGroup = new L.LayerGroup();
map.on('click',addMarker);
});
//add group layer to map
map.addLayer(search_group);
//start to initiate adding marker
function addMarker(e){
// Add marker to map at click location; add popup window
var newMarker = new L.marker(e.latlng).addTo(map);
}
//create array
var marker= new Array();
function onMapClick(e){
marker = new L.Marker(e.latlng,
{draggable: false});
//pushing items into array each by each and then add markers
function itemWrap(){
for(i=0; i<items.length; i++){
var LamMarker = new
L.marker([items[i].lat,items[i].lon]);
marker.push(LamMarker);
map.addLayer(marker[i]);
}
}
//create popup
marker.bindPopup().openPopup();
};
//add to map function with a popup that contains a link, which when clicked will have a popup of details and booking options
//this link will have as its id the latlng of the point
//this id will then be compared to when you click on one of your created markers
map.on('click',function(e){
var clickPositionMarker = L.marker([e.latlng.lat,e.latlng.lng],{icon:idMarker});
clickArr.push(clickPositionMarker);
mapLat = e.latlng.lat;
mapLon = e.latlng.lng;
clickPositionMarker.addTo(search_group).bindPopup().openPopup();
L.marker(e.latlng).addTo(map)
.bindPopup("You're within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
}
map.on('locationfound' , onLocationFound);
//access it using markers[i]["id"]
I did test the index.html before and of course i uncomment the L.marker function and it works fine. Popup did appears. But when i test the, marker, put the comment on L.marker, only map-wrap and other css appears. PLease help me, i did review the doc, test quite lots but nothing appears. Someone please help me since i'm really new to leaflet