Search code examples
pythonleafletgisgeojson

GeoJson and Leaflet

I have had a long look for a solution to this issue and was wondering if someone could help me here.

I am mapping traffic detectors on a freeway with leaflet, using flask/python as a backend.

This is my updated code - the GeoJson is now in a javascript file under variable name myGeojsonData. I am now receiving this error :

Uncaught TypeError: this.callInitHooks is not a function
    at Object.e [as GeoJSON] (leaflet.js:5)
    at analytics:59

So now trying to uncover what it is that I am doing wrong here. It works when I load the data into http://geojson.io/

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="author" content="SemiColonWeb"/>
<!-- Leaflet Page -->
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/>
     <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
   crossorigin=""></script>

<script type="text/javascript" src="{{ url_for('static',filename='geojson/GeoJsonData.js') }}"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <!-- Document Title
        ============================================= -->
    <title>Journey Analytics Group</title>


</head>

<body>

     <div id="mapid" style="width: 600px; height: 400px; position: relative; outline: none;"></div>
</body>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>

<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>



</body>


<script>


    var mymap = L.map('mapid').setView([-37.735018, 144.894947], 13);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(mymap);

    L.GeoJSON(myGeojsonData).addTo(map).add;


    var circle = L.circle([-37.735018, 144.894947], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 50
}).addTo(mymap);




</script>

I am now incorporating in GEOJson data with the detector locations (data has been changed for privacy reasons slightly). This is the data.

{
  "features": [
    {
      "geometry": {
        "coordinates": [
          144.829434,
          -37.825233
        ],
        "type": "Point"
      },
      "properties": {
        "Area": "Combined Entry MVT on Grieve Pde, West Gate Fwy North Ramps, Grieve Pde Byp Start EB between Grieve ",
        "IDnumber": "2541EL_P0"
      },
      "type": "Feature"
    },
    {
      "geometry": {
        "coordinates": [
          144.829502,
          -37.825234
        ],
        "type": "Point"
      },
      "properties": {
        "Area": "Combined Entry MVT on Grieve Pde, West Gate Fwy North Ramps, Grieve Pde Byp Start EB between Grieve ",
        "IDnumber": "2541EL_P1"
      },
      "type": "Feature"
    },
    {
      "geometry": {
        "coordinates": [
          144.881846,
          -37.732708
        ],
        "type": "Point"
      },
      "properties": {
        "Area": "Combined Entry MVT on Keilor Rd WB between Keilor Rd And Coinston Ave & Mcnamara Ave Calder Fwy Nort",
        "IDnumber": "1917EL_P0"
      },
      "type": "Feature"
    },
    {
      "geometry": {
        "coordinates": [
          144.881781,
          -37.732701
        ],
        "type": "Point"
      },
      "properties": {
        "Area": "Combined Entry MVT on Keilor Rd WB between Keilor Rd And Coinston Ave & Mcnamara Ave Calder Fwy Nort",
        "IDnumber": "1917EL_P1"
      },
      "type": "Feature"
    },
    {
      "geometry": {
        "coordinates": [
          144.881337,
          -37.732571
        ],
        "type": "Point"
      },
      "properties": {
        "Area": "Combined Entry MVT on Keilor Rd WB between Keilor Rd And Coinston Ave & Mcnamara Ave Calder Fwy Nort",
        "IDnumber": "1917M0_P0"
      },
      "type": "Feature"
    },
    {
      "geometry": {
        "coordinates": [
          144.88129,
          -37.732541
        ],
        "type": "Point"
      },
      "properties": {
        "Area": "Combined Entry MVT on Keilor Rd WB between Keilor Rd And Coinston Ave & Mcnamara Ave Calder Fwy Nort",
        "IDnumber": "1917M0_P1"
      },
      "type": "Feature"
    },
    {
      "geometry": {
        "coordinates": [
          144.880801,
          -37.73238
        ],
        "type": "Point"
      },
      "properties": {
        "Area": "Combined Entry MVT on Keilor Rd WB between Keilor Rd And Coinston Ave & Mcnamara Ave Calder Fwy Nort",
        "IDnumber": "1917M1_P0"
      },
      "type": "Feature"
    }
  ],
  "type": "FeatureCollection"
}

My issue is - I am unsure how to have leaflet take this data in it's current form.

I have tried adding it as a layer and etc but it seems to error code.

Does someone have a solution of some sort?

I also am a little bit lost on how to take the data from a folder instead of directly pasting the JSON data into the script in the html.

Thanks in advance (especially @Istopopoki thank you so much),

Solution

  • You can try the following :

    1. paste your geojson on http://geojson.io to make sure it is correct

    2. put the data in a separate js file and define a variable like this :

      var myGeojsonData = {your geojson goes here};

    3. Include the js file in your html file like a regular js file. Now your data is accessible using the variable name you chose.

    4. Have a look a the leaflet geoJson method, which will allow you to display your data without having to loop through it. You will write something like :

      L.geoJSON(myGeojsonData).addTo(map);