1

Here is my script, sorry if it's a bit messy, I've tried alot...

<script>
     var geojsonObject = #{jsonDataModel.jsonData};

     var markerIcon = L.icon({
         iconUrl: '#{request.contextPath}/images/pin48.png',
         iconAnchor:   [17,43] // point of the icon which will correspond to marker's location
         });

      <!--Initialisieren der Karte mit Angabe der Koordinate und der Zoomstufe:-->
      var mapLat = #{jsonDataModel.centerLat};
      var mapLon = #{jsonDataModel.centerLon};
      var zoom = #{jsonDataModel.zoom};
        var map = L.map('map').setView([mapLat, mapLon], zoom);

        <!--Laden eines Layers mit Angabe der URL auf den OpenStreetMap-Kartendienst sowie einem Kartenlabel:-->
        L.tileLayer(#{geodataserverurlreader.geodataserverUrl}, {
            attribution: '&amp;copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap-Mitwirkende</a>. ',
            maxZoom: 18,
        }).addTo(map);

        L.tileLayer('http://a.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png',{
            attribution: 'Daten <a href="http://www.openstreetmap.org/copyright">© OpenStreetMap-Mitwirkende</a>, Grafik: <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA 2.0</a> <a href="http://www.openrailwaymap.org/">OpenRailwayMap</a>',
            maxZoom: 18,
            minZoom: 10,
        }).addTo(map);

        L.tileLayer('http://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png',{
            attribution: 'Daten <a href="http://www.openstreetmap.org/copyright">© OpenStreetMap-Mitwirkende</a>, Grafik: <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA 2.0</a> <a href="http://www.openrailwaymap.org/">OpenRailwayMap</a>',
            maxZoom: 18,
        }).addTo(map);

        var markers = L.markerClusterGroup();

        var oms = new OverlappingMarkerSpiderfier(map);

        var geoJsonLayer = L.geoJSON(geojsonObject, {
            onEachFeature: onEachFeature,
            pointToLayer : function(feature, latlng){
               var marker = L.marker(latlng);
//             oms.addMarker(marker);
               return marker;
            }
            });

        markers.addLayer(geoJsonLayer);

        map.addLayer(markers);

  </script>

So now I'm wondering what I'm missing:

  1. I've added the tileLayer to the map.
  2. I initialized the markerCluster.
  3. I'm (hopefully) adding the geoData properly to the Layer (geoJsonLayer)
  4. I add these layers to the markerCluster.
  5. I add the markerCluster to the map.

Additionally, I made sure my leaflet script is before the markercluster.

<script src="#{request.contextPath}/lib/leaflet/leaflet-src.js" />
<script src="#{request.contextPath}/lib/leaflet/leaflet.markercluster-src.js" />

<script src="#{request.contextPath}/js/oms.js" />
<script src="#{request.contextPath}/js/oneachfeature.js" />

My result looks like this: weird lines and stuff

(These lines came with adding the 3rd L.tileLayer

Anyone got an Idea what I'm doing wrong?

GeoData

{  
   "totalFeatures":2,
   "features":[  
      {  
         "geometry":{  
            "coordinates":[  
               10.111521,
               54.3688972
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>: 928012610566 / <br><b>Auslösungsart<\/b>: ?? ZEIT ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 03.11.2011 09:20:00"
         }
      },
      {  
         "geometry":{  
            "coordinates":[  
               9.9738655,
               53.4957533
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>: 928012610368 / <br><b>Auslösungsart<\/b>: ?? ZEIT ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 03.10.2011 09:00:17"
         }
      },
      {  
         "geometry":{  
            "coordinates":[  
               11.4343346,
               50.5976445
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>:  / <br><b>Auslösungsart<\/b>: ?? ZEIT ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 01.06.2011 09:07:30"
         }
      },
      {  
         "geometry":{  
            "coordinates":[  
               11.3753961,
               50.6505401
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>:  / <br><b>Auslösungsart<\/b>: ?? ZEIT ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 05.08.2010 10:00:12"
         }
      },
      {  
         "geometry":{  
            "coordinates":[  
               9.9325934,
               53.5313402
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>: 928012610376 / <br><b>Auslösungsart<\/b>: ?? ZEIT ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 06.08.2012 14:56:23"
         }
      },
      {  
         "geometry":{  
            "coordinates":[  
               9.6329706,
               53.7676329
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>:  / <br><b>Auslösungsart<\/b>: ?? ZEIT ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 05.08.2010 14:51:40"
         }
      },
      {  
         "geometry":{  
            "coordinates":[  
               9.6329706,
               53.7676329
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>:  / <br><b>Auslösungsart<\/b>: ?? ZEIT ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 05.08.2010 14:51:40"
         }
      },
      {  
         "geometry":{  
            "coordinates":[  
               8.2252779,
               53.1435944
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>: 928012650174 / <br><b>Auslösungsart<\/b>: ?? STOERCODE ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 06.06.2017 15:16:11"
         }
      },
      {  
         "geometry":{  
            "coordinates":[  
               8.7582774,
               51.7287785
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>: 928012650166 / <br><b>Auslösungsart<\/b>: ?? ZEIT ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 06.06.2017 15:44:46"
         }
      },
      {  
         "geometry":{  
            "coordinates":[  
               11.4343346,
               50.5976445
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>:  / <br><b>Auslösungsart<\/b>: ?? ZEIT ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 01.06.2011 09:07:30"
         }
      }
    .
    .
    .

   ],
   "type":"FeatureCollection"
}

VALID JSON (RFC 4627)

Even testing my geojson data with geojson.io gives me valid markers. (can't link because my rep is too low.)

Expected Result

Here is the wanted result.

closed as unclear what you're asking by whyzar, mgri, Mapperz Sep 15 '17 at 17:44

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • Are you sure that your geojsonObject a valid geojson? If not, can you add (at least a part) of your data to the question? Do you get any error messages in the developer console, when loading your map? – tallistroan Sep 15 '17 at 9:28
  • @tallistroan i've edited the geodata and the expected result. Sorry for being unclear and thanks for your effort! – 0x45 Sep 15 '17 at 9:52
0

Maybe there is an error in your onEachFeature function which is probably defined in your oneachfeature.js, because besides that everything should work from looking at your code.

However some notes regarding your code:

  • You don't really need the OverlappingMarkerSpiderfier plugin, since this function is now included in the markercluster plugin too
  • You can delete the first tileLayer for the railway map, because it is normally not necessary to add a basemap more than once to your map

Either way here is a working example from scratch using your geojson data and the markercluster plugin (and without using onEachFeature):

var map = L.map('map').setView([50.50, 10.25], 6);
var osmTileLayer = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
});
var railwayTileLayer = new L.TileLayer('http://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png', {
    maxZoom: 18
});

map.addLayer(osmTileLayer);
map.addLayer(railwayTileLayer);
var stations = {  
   "totalFeatures":2,
   "features":[  
      {  
         "geometry":{  
            "coordinates":[  
               10.111521,
               54.3688972
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>: 928012610566 / <br><b>Auslösungsart<\/b>: ?? ZEIT ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 03.11.2011 09:20:00"
         }
      },
      {  
         "geometry":{  
            "coordinates":[  
               9.9738655,
               53.4957533
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>: 928012610368 / <br><b>Auslösungsart<\/b>: ?? ZEIT ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 03.10.2011 09:00:17"
         }
      },
      {  
         "geometry":{  
            "coordinates":[  
               11.4343346,
               50.5976445
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>:  / <br><b>Auslösungsart<\/b>: ?? ZEIT ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 01.06.2011 09:07:30"
         }
      },
      {  
         "geometry":{  
            "coordinates":[  
               11.3753961,
               50.6505401
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>:  / <br><b>Auslösungsart<\/b>: ?? ZEIT ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 05.08.2010 10:00:12"
         }
      },
      {  
         "geometry":{  
            "coordinates":[  
               9.9325934,
               53.5313402
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>: 928012610376 / <br><b>Auslösungsart<\/b>: ?? ZEIT ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 06.08.2012 14:56:23"
         }
      },
      {  
         "geometry":{  
            "coordinates":[  
               9.6329706,
               53.7676329
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>:  / <br><b>Auslösungsart<\/b>: ?? ZEIT ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 05.08.2010 14:51:40"
         }
      },
      {  
         "geometry":{  
            "coordinates":[  
               9.6329706,
               53.7676329
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>:  / <br><b>Auslösungsart<\/b>: ?? ZEIT ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 05.08.2010 14:51:40"
         }
      },
      {  
         "geometry":{  
            "coordinates":[  
               8.2252779,
               53.1435944
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>: 928012650174 / <br><b>Auslösungsart<\/b>: ?? STOERCODE ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 06.06.2017 15:16:11"
         }
      },
      {  
         "geometry":{  
            "coordinates":[  
               8.7582774,
               51.7287785
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>: 928012650166 / <br><b>Auslösungsart<\/b>: ?? ZEIT ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 06.06.2017 15:44:46"
         }
      },
      {  
         "geometry":{  
            "coordinates":[  
               11.4343346,
               50.5976445
            ],
            "type":"Point"
         },
         "type":"Feature",
         "properties":{  
            "popupContent":"<b>Fz/Tz<\/b>:  / <br><b>Auslösungsart<\/b>: ?? ZEIT ??<br><b>Code<\/b>: <br><b>Text<\/b>: <br><b>Ereigniszeit<\/b>: 01.06.2011 09:07:30"
         }
      }
   ],
   "type":"FeatureCollection"
};
var markerIcon = L.icon({
         iconUrl: '#{request.contextPath}/images/pin48.png',
         iconAnchor:   [17,43] 
});
var stationLayer = L.geoJSON(stations, {
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {icon: markerIcon});
    }
});
var markers = L.markerClusterGroup();
markers.addLayer(stationLayer);
map.addLayer(markers);
  • Why did you use Circle markers? – 0x45 Sep 15 '17 at 13:39
  • Just because it is the basic example at the leaflet page. However I just edited my answer using a custom icon. This maybe was also not working like expected in your code. Hopefully now it works – tallistroan Sep 15 '17 at 13:55
  • I feel ashamed... I had somehow bad versions. now its working – 0x45 Sep 15 '17 at 22:26

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