-9

I am in need of a Leaflet map to show my Shapefile or Geojson file. I need a full code for importing the shp file/.json from my pc and displaying that particular shapefile to my map as center view. The link below is for my .json file. https://drive.google.com/open?id=15KErxD2_O9NN9zOObx4zN6rfufuziTgG

closed as off-topic by underdark Jun 29 '18 at 20:40

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "When seeking help to debug/write/improve code always provide the desired behavior, a specific problem/error and the shortest code (as formatted text, not pictures) needed to reproduce it in the question body. Providing a clear problem statement and a code attempt helps others to help you." – underdark
If this question can be reworded to fit the rules in the help center, please edit the question.

6

You asked about OpenLayers map but tagged Leaflet also. If you are open to leaflet, here is an example:

Map from GeoJSON, that reads from a GeoJSON file using JQuery and plots the points as circleMarkers, it has a popup and will zoom to the extents of the points:

http://www.gistechsolutions.com/leaflet/DEMO/Drink/Drink.html

This example needs to run from a web server, like Apache or IIS. It will not load the data if you double click on the html file.

Wow 26 MB geojson file, may want to look at topojson or vector tiles to help with speed. This may crash browsers at this size.

enter image description here

<!DOCTYPE html>
<html>
<head>
    <title>Polygon Example</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<style>  
      #map {
        width: 800px;
        height: 600px;
        border: 1px solid black;
        z-index: 0;
      }
</style>
</head>

<body>
<div id="map" ></div>
</div>

<script>
var url = 'output.json';  // my GeoJSON data source, in same folder as my html page.

    var map = L.map('map').setView([ 27.613458,  84.287101], 7); 

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


// Set style function that sets fill color property
function style(feature) {
    return {
        fillColor: 'blue', 
        fillOpacity: 0.5,  
        weight: 2,
        opacity: 1,
        color: '#ffffff',
        dashArray: '3'
    };
}
    var highlight = {
        'fillColor': 'yellow',
        'weight': 2,
        'opacity': 1
    };

        function forEachFeature(feature, layer) {

            var popupContent = "<p><b>PALIKA: </b>"+ feature.properties.PALIKA +
                "</br>DISTRICT: "+ feature.properties.DISTRICT +
                "</br>GAPA_NAPA: "+ feature.properties.GAPA_NAPA +
                "</br>PGN_TYPE: "+ feature.properties.GN_TYPE +
                "</br>PROVINCE: "+ feature.properties.PROVINCE +'</p>';

            layer.bindPopup(popupContent);

            layer.on("click", function (e) { 
                theLayer.setStyle(style); //resets layer colors
                layer.setStyle(highlight);  //highlights selected.
            }); 
        }

// Null variable that will hold layer
var theLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: style});

    $.getJSON(url, function(data) {
        theLayer.addData(data);
    });

 theLayer.addTo(map);

// for Layer Control    
var baseMaps = {
    "Open Street Map": osm      
};

var overlayMaps = {
    "My Data":theLayer
};  

//Add layer control
L.control.layers(baseMaps, overlayMaps).addTo(map);

</script>
</body>
</html>

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