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.

1 Answer 1


This is a 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:


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>
    <title>Polygon Example</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
      #map {
        width: 800px;
        height: 600px;
        border: 1px solid black;
        z-index: 0;

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

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.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) {


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

var overlayMaps = {
    "My Data":theLayer
//Add layer control
L.control.layers(baseMaps, overlayMaps).addTo(map);


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