4

I'm having troubles getting the Leaflet Marker Cluster working with Leaflet-layerJSON. I'm trying to make a Leaflet map with data from OpenStreetMap. The markers are showing on the map, but they are not clustering. It would be a great help, if you could point out my mistakes in the following code:

<head>
<meta charset="UTF-8"/>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.0.0/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.0.0/mapbox.css' rel='stylesheet' />
<script src="leaflet-layerjson.js"></script>

<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />

<div id="map"></div>
<style>
    #map { height: 100%; wigth: 100%}
</style>

<script>
    var map = L.map('map', {
        center: [55.6588976, 12.567387],
        zoom: 14
    });

    var grundkort = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

    var markers = new L.MarkerClusterGroup();

    var bar = L.layerJSON({
        url: 'http://overpass-api.de/api/interpreter?data=[out:json];node({lat1},{lon1},{lat2},{lon2})[amenity=bar];out;',
        propertyItems: 'elements',
        propertyTitle: 'tags.name',
        propertyLoc: ['lat','lon'],
        buildIcon: function(data, title) {
        return new L.Icon({
            iconUrl:'svg/bar-12.png',
            iconSize: new L.Point(30, 30),
            iconAnchor: new L.Point(18, 37),
            popupAnchor: new L.Point(0, -37)
            });
        },
        buildPopup: function(data, marker) {
            return data.tags.name || null;
        }
    }).addTo(map);

    markers.addLayer(new L.Marker(getRandomLatLng(map)));
    map.addLayer(markers);

</script>

I have tried to find answers to my question in other posts, but without any luck. I'm new to webmapping and stackexchange and apologize if my question is unclear.

3

See example Overpass API&MarkerCluster on https://github.com/binaworks/osmtagviz or https://github.com/stork-map/stork-map.github.io (http://stork-map.github.io/#6/48.611/31.674)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.