{"id":16740218,"url":"https://github.com/kshitijrajsharma/plgsp_webmap","last_synced_at":"2026-04-17T15:02:20.451Z","repository":{"id":112648784,"uuid":"412156148","full_name":"kshitijrajsharma/plgsp_webmap","owner":"kshitijrajsharma","description":"Training for IT Officers of Gandaki Province , Organized by Gandaki Academy in support of (Provincial and Local Governance Support Program(PLGSP). Technical Support Provided by I.T. Maps and Consultant Pvt. Ltd.","archived":false,"fork":false,"pushed_at":"2021-09-30T19:19:54.000Z","size":2737,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-04T08:49:25.198Z","etag":null,"topics":["geojson","jquery","leafletjs","line","point","polygon"],"latest_commit_sha":null,"homepage":"https://itskshitiz321.github.io/plgsp_webmap/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kshitijrajsharma.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-30T17:17:20.000Z","updated_at":"2021-09-30T19:19:57.000Z","dependencies_parsed_at":"2023-06-02T04:00:49.142Z","dependency_job_id":null,"html_url":"https://github.com/kshitijrajsharma/plgsp_webmap","commit_stats":null,"previous_names":["krschap/plgsp_webmap","kshitijrajsharma/plgsp_webmap"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kshitijrajsharma/plgsp_webmap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kshitijrajsharma%2Fplgsp_webmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kshitijrajsharma%2Fplgsp_webmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kshitijrajsharma%2Fplgsp_webmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kshitijrajsharma%2Fplgsp_webmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kshitijrajsharma","download_url":"https://codeload.github.com/kshitijrajsharma/plgsp_webmap/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kshitijrajsharma%2Fplgsp_webmap/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268455445,"owners_count":24253171,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["geojson","jquery","leafletjs","line","point","polygon"],"created_at":"2024-10-13T00:57:08.723Z","updated_at":"2026-04-17T15:02:15.401Z","avatar_url":"https://github.com/kshitijrajsharma.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Map\n\nThis is Training of Gandaki Academy  , Provincial and Local Governance Support Program , Gandaki Province Nepal \n\n## Installation\n\nWe will use [leaflet](https://leafletjs.com/examples/quick-start/) for map rendering.\n\n```bash\n \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/leaflet@1.7.1/dist/leaflet.css\"\n   integrity=\"sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==\"\n   crossorigin=\"\"/\u003e\n```\nLet's include leaflet script file in our html\n```bash\n  \u003c!-- Make sure you put this AFTER Leaflet's CSS --\u003e\n \u003cscript src=\"https://unpkg.com/leaflet@1.7.1/dist/leaflet.js\"\n   integrity=\"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==\"\n   crossorigin=\"\"\u003e\u003c/script\u003e\n```\n## Setup Map Division\n\n```bash\n \u003cdiv id=\"mapid\"\u003e\u003c/div\u003e\n\n```\n\n## Setup Jquery and bootstrap\n```\n  \u003cscript\n    src=\"https://code.jquery.com/jquery-3.6.0.js\"\n    integrity=\"sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=\"\n    crossorigin=\"anonymous\"\n  \u003e\u003c/script\u003e\n```\nPut this inside head section of your page\n```\n\u003clink href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We\" crossorigin=\"anonymous\"\u003e\n```\n\nPlease make sure to update tests as appropriate.\n\n## Jquery Document ready function\nA page can't be manipulated safely until the document is \"ready.\" jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( \"load\", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.\n\n```\n$( document ).ready(function() {\n    console.log( \"ready!\" );\n});\n```\n# Setup Map with map variable\n```\nvar mymap = L.map(\"mapid\").setView([28.2096, 83.9856], 12);\n```\nSetup Google Satellite Layer for leaflet \n```\n  var googleSat = L.tileLayer(\n    \"http://{s}.google.com/vt/lyrs=s\u0026x={x}\u0026y={y}\u0026z={z}\",\n    {\n      maxZoom: 20,\n      subdomains: [\"mt0\", \"mt1\", \"mt2\", \"mt3\"],\n    }\n  );\n\n```\nSetup Openstreetmap Layer for leaflet \n```\n  var osm = L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n    maxZoom: 19,\n    attribution:\n      '\u0026copy; \u003ca href=\"https://openstreetmap.org/copyright\"\u003eOpenStreetMap contributors\u003c/a\u003e',\n  });\n\n```\nSetup Google Map Layer for leaflet \n```\n  googleStreets = L.tileLayer(\n    \"http://{s}.google.com/vt/lyrs=m\u0026x={x}\u0026y={y}\u0026z={z}\",\n    {\n      maxZoom: 20,\n      subdomains: [\"mt0\", \"mt1\", \"mt2\", \"mt3\"],\n    }\n  ).addTo(mymap);\n\n```\n\nWe need to create list of basemap to add it on leaflet control \n\n```\n  var baseMaps = {\n    \"Google Map\": googleStreets,\n    \"Open Street Map\": osm,\n    \"Satellite\": googleSat,\n  };\n\n```\n# Leaflet Control \nLeaflet has a nice little control that allows your users to control which layers they see on your map. We will assign it in variable called layerswitcher so that we could add inside it later.\nNote : {collapsed:false } will set leaflet layer control open\n```\nlayerswitcher = L.control\n    .layers(baseMaps, {}, { collapsed: false })\n    .addTo(mymap);\n\n```\nWhat if we want to add northarrow ? Not only northarrow we can add other pictures over leafletmap using this methodology\n```\nvar northarrow = L.control({ position: \"topright\" });\n```\nYou can add image inside control, This function will run after northarrow will be added to map . .onAdd() function will run after layer is added.\n```\n  northarrow.onAdd = function () {\n    var img = L.DomUtil.create(\"img\");\n    img.src = \"img/northarrow.png\";\n    img.style.width = \"100px\";\n    img.style.height = \"100px\";\n\n    return img;\n  };\n  // now add northarrow to map\n  northarrow.addTo(mymap);\n```\n# Leaflet custom Marker Setup \n```\n  var myIcon = L.icon({\n    iconUrl:  '***marker directory *****' ,\n    iconSize: [20, 20]\n  });\n```\nYou can add marker with custom marker with this leaflet code \n ```\nL.marker(latlng, {icon: myIcon});\n```\n# jQuery getJSON() Method\nThe getJSON() method is used to get JSON data using an AJAX HTTP GET request.\n```\n  $.getJSON(\"geojson/roadmodi.geojson\", function (data) {\n    console.log(data);\n\n  });\n```\n#  L.geoJson \nIt Represents a GeoJSON object or an array of GeoJSON objects. Allows you to parse GeoJSON data and display it on the map. Extends FeatureGroup.\n```\nL.geoJson(data, {\n\tstyle: function (feature) {\n\t\treturn {color: feature.properties.color};\n\t},\n\tonEachFeature: function (feature, layer) {\n\t\tlayer.bindPopup(feature.properties.description);\n\t}\n}).addTo(map);\n```\n## Options\n### pointToLayer( \u003cGeoJSON\u003e featureData, \u003cLatLng\u003e latlng )\nFunction that will be used for creating layers for GeoJSON points (if not specified, simple markers will be created).\n\n### style( \u003cGeoJSON\u003e featureData )\nFunction that will be used to get style options for vector layers created for GeoJSON features.\n\n### onEachFeature( \u003cGeoJSON\u003e featureData, \u003cILayer\u003e layer )\nFunction that will be called on each created feature layer. Useful for attaching events and popups to features.\n\n#### For Loop inside on EachFeature for finding attributes Key and value from geojson \nHere table is class of [bootstrap](https://getbootstrap.com/docs/4.0/content/tables/)\n\n```\n        var popupContent = '\u003ctable   class=\"table table-bordered\"\u003e';\n\n        for (var p in feature.properties) {\n          popupContent +=\n            \"\u003ctr\u003e\u003ctd\u003e\" +\n            p +\n            \":\" +\n            \"\u003c/td\u003e\u003ctd\u003e\" +\n            feature.properties[p] +\n            \"\u003c/td\u003e\u003c/tr\u003e\";\n        }\n        popupContent += \"\u003c/table\u003e\";\n\n```\nfeature.properties contains all attribute information information hence p represents key of json and feature.properties[p] represents value of that key \n#### Binding Popup to layer\n```\n        layer.bindPopup(popupContent, {\n          maxHeight: 225,\n          width: 200,\n          closeButton: false,\n        });\n```\n## Mouse Events \n```\n        layer.on(\"mouseover\", function () {\n          layer.openPopup();\n        });\n        layer.on(\"mouseout\", function () {\n          layer.closePopup();\n        });\n\n```\n## Mouse Event Lat Long Finder\n```\n  mymap.addEventListener('mousemove', function(ev) {\n    lat = ev.latlng.lat;\n    lng = ev.latlng.lng;\n    console.log(lat,lng);\n });\n ```\n\n## Happy Learning ! \u003c3\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkshitijrajsharma%2Fplgsp_webmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkshitijrajsharma%2Fplgsp_webmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkshitijrajsharma%2Fplgsp_webmap/lists"}