clusteringjavascriptleafletweb-mapping
I have image map of one state, where I would like to put about 100 markers. Is it possible to use only one image map instead of CloudMade tiles Leaflet usually uses? So, I need only that image to be shown and markers on that image. I need zooming functionality and marker clustering (leaflet clustering if it's possible). These are pretty all functions I need. Can someone help me, which libraries or APIs are the best way to develop that kind of map?
Thanks.
1) Marker Popups: Content in popups are pure HTML. You can add multiple rows with data. Here is a code snippet to add a marker and popup multi-row text on mouse click. You can add rows, create table or change fonts/ colors - whatever is allowed in HTML/CSS.
enter code here
//Add Marker with Popup Text
var mymarker = new L.Marker(map.getCenter());
mymarker.addTo(map).bindPopup(map.getCenter() +"<br>" +
"Min Zoom" + map.getMinZoom() +"<br>" +
"Max Zoom" + map.getMaxZoom());
The result would appear as in the figure below
2) Custom Markers: You can look at Custom Icons which has detailed steps with examples
3) Popup on MouseOver: I would recommend against Mouseover in maps unless you have an absolute need. Think of today's tablets and mobile devices. They don't support MouseOver. If the number of markers per bounding box goes up - it could get problematic with usability and performance. Should you absolutely need one you could try extending the event object.
Cheers,
Ramesh
Much easier just to draw them in a GIS system and then add them as a layer to the map. Raphael would work, but it seems like the long way around.
Also any curve is really just made up of a series of straight lines so you could likely achieve the required effect using Leaflet.
Best Answer
It is possible to use a single state as the basemap in leaflet. You need at host the wms service and add it in like any other wms service with "L.tileLayer.wms"
Is this an example of what you want to do: http://www.geocalendar.ru/ The developer for this site can be found on Twitter with the handle @nextstopsun. He takes advantage of the Proj4Leaflet project hosted on github. If you are trying to show your data in a non-standard projection I suggest digging through that.
For your points layers - you can add them as WMS features, GeoJSON, etc. If you want to enter the coordinates in manually (assuming you have the coordinates for your points in wgs84) you can use the Marker object fin leaflet's API documentation.
Here is a great starter example leaflet put together that you could hack up and replace their baselayers with your state basemap wms service, and their markers with your markers. http://leafletjs.com/examples/layers-control-example.html
Up front if you can get your data (wms state basemap and point coordinates) into WGS84 (4326) it would make things a lot easier.