JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://strasbourg.volcanis.me/css/stylesheet.css">
<link rel="stylesheet" href="http://strasbourg.volcanis.me/css/leaflet.css">
<script src="http://strasbourg.volcanis.me/js/leaflet/leaflet.js"></script>
<script src="http://strasbourg.volcanis.me/js/leaflet.markercluster-src.js"></script>
<script src="http://strasbourg.volcanis.me/js/jquery.js"></script>
<link rel="stylesheet" href="http://strasbourg.volcanis.me/css/MarkerCluster.css">
<link rel="stylesheet" href="http://strasbourg.volcanis.me/css/MarkerCluster.Default.css">
<div id="map"></div>
JavaScript
var map;
var json = {"type": "FeatureCollection",
"features": [
{
"geometry": {
"type": "Point",
"coordinates": [7.122182250022888, 43.580379197527314]
},
"type": "Feature",
"properties": {
"apparence": "dome",
"direction": "0",
"angle": "0",
"op_type": "public",
"id_camera": "7846",
"lon": "7.122182250022888",
"lat": "43.580379197527314",
"title": "Antibes - Angle rue de la République et avenue du 24 aout",
"op_name": "Ville d'Antibes"
}
}]};
function initmap() {
map = new L.Map('map').setView([ 47.00, 3.00], 6);
L.control.scale().addTo(map);
var mqTilesAttr = 'Map data © <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">';
L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/{type}/{z}/{x}/{y}.png', { subdomains: '2434', type: 'osm', attribution: mqTilesAttr }).addTo(map);
}
initmap();
var geoJsonLayer2 = L.geoJson(json, {
pointToLayer: function (feature, latlng) {
switch(feature.properties.apparence) {
case 'dome': return new L.layerGroup([new L.Circle(latlng, 50, { color:'red', weight : 1, fillOpacity:0.1 })]);
};
}
});
map.addLayer(geoJsonLayer2);