0

I'm making my own map for the personal use only and at the moment my code looks like this

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css">
   <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>
  <script src="http://leaflet-extras.github.io/leaflet-providers/leaflet-providers.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
    <!--script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script-->
    <script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
<script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="http://xguaita.github.io/Leaflet.MapCenterCoord/dist/L.Control.MapCenterCoord.min.js"></script>
       <style>
   #mapid {
        height: 100%;
      }
      .leaflet-container .leaflet-control-mapcentercoord{background-color:rgba(255,255,255,.7);box-shadow:0 0 5px #bbb;padding:0 5px;margin:0;color:#333;font:11px/1.5 "Helvetica Neue",Arial,Helvetica,sans-serif}.leaflet-control-mapcentercoord-icon{background:url(http://xguaita.github.io/Leaflet.MapCenterCoord/dist/icons/MapCenterCoordIcon1.svg) 50% 50% no-repeat;margin:-18px 0 0 -1px;width:16px;height:16px;left:50%;top:50%;content:'';display:block;position:absolute;z-index:-1}
    </style>

    </head> 

   <body>


  <div id="mapid"></div>

<script>
    var OpenStreetMaps  = L.map('mapid').setView([ 50.066072, 19.959304], 10);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
        maxZoom: 14,
        attribution: '' + '',
    }).addTo(OpenStreetMaps); 
   L.control.mapCenterCoord().addTo(OpenStreetMaps);     

var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent(e.latlng.toString())
        .openOn(OpenStreetMaps);
}
OpenStreetMaps.on('click', onMapClick);

    var OpenStreetMaps = L.map('mapid');

    map.createPane('labels');

    // This pane is above markers but below popups
    map.getPane('labels').style.zIndex = 600;

    // Layers in this pane are non-interactive and do not obscure mouse/touch events
    map.getPane('labels').style.pointerEvents = 'none';

    var cartodbAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution">CARTO</a>';

    var positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
        attribution: cartodbAttribution
    }).addTo(OpenStreetMaps);

    var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
        attribution: cartodbAttribution,
        pane: 'labels'
    }).addTo(OpenStreetMaps);

    geojson = L.geoJson(euCountries).addTo(OpenStreetMaps);

    geojson.eachLayer(function (layer) {
        layer.bindPopup(layer.feature.properties.name);
    });

  </script>

</body>
</html>

Basically it's just a map. But what i'm trying to do is to put a multi-polygon structure drawing a zone boundaries on the map. The polygon data is located on the external server and is in JSON format, and here's the link to it https://api.traficar.pl/eaw-rest-api/zone The second thing i'd like to do is to put the markers also stored in JSON and also on the external server here: https://api.traficar.pl/eaw-rest-api/car?format=json, note that each node under "cars" has it's own lat and long.

I'm seeking examples or documentation. I found quite interesting and promising example looking like what I was thinking about. Here's the link: https://calvinmetcalf.github.io/leaflet-ajax/example/ https://github.com/calvinmetcalf/leaflet-ajax

I've been struggling with this for quite a while but can't seem to sort it out.

New contributor
user3184101 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
  • Sounds like your hitting Cross-Origin Resource Sharing (CORS) developer.mozilla.org/en-US/docs/Web/HTTP/CORS – Mapperz Nov 7 at 2:13
  • 1
    At the moment your code is all over the place: statement var OpenStreetMaps = L.map('mapid'); makes no sense, it should probably be be var map = L.map('mapid'); since you are using map later (which is now not defined at all). GeoJSON object euCountries is not defined anywhere. I would recommend that you put up your map step by step, adding layer by layer, functionality by functionality, checking at each step in browser debugger that there is no error in the console and no missed network hits in network. – TomazicM Nov 7 at 9:58

Your Answer

user3184101 is a new contributor. Be nice, and check out our Code of Conduct.

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

Browse other questions tagged or ask your own question.