Last active
May 29, 2021 15:20
-
-
Save rajanski/4d2595c1fd4e35c19b4e1a02b4ed579f to your computer and use it in GitHub Desktop.
Geojson local file viewer (in browser). It does NOT upload your geojson data to some service. Properties (Attributes) are accessible via click on feature.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/bin/bash | |
| usage() | |
| { | |
| cat << EOF | |
| usage: view_geojson.sh -f geojson_file.geojson | |
| This script views a geojson file in a browser (default is google-chrome) | |
| EOF | |
| } | |
| while getopts “o:f:b:nh” OPTION | |
| do | |
| case $OPTION in | |
| o) | |
| outfile=$OPTARG | |
| ;; | |
| f) | |
| infile=$OPTARG | |
| ;; | |
| b) | |
| browser=$OPTARG | |
| ;; | |
| n) | |
| no_view=1 | |
| ;; | |
| h) | |
| usage | |
| exit | |
| ;; | |
| esac | |
| done | |
| html1=$(cat <<EOF | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Mappp</title> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> | |
| <style> body {padding: 0; margin: 0; } html, body, #map {height: 100%; width: 100%; } </style> </head> | |
| <body> | |
| <div id="map"></div> | |
| </body> | |
| <script> | |
| var data = | |
| EOF | |
| ) | |
| html2=$(cat <<EOF | |
| ; | |
| var map = L.map("map"); | |
| var osm=new L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png",{ | |
| attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"}); | |
| osm.addTo(map); | |
| function it_properties(props) { | |
| var html = "<p> "; | |
| Object.keys(props).forEach(function(key) {html+="<b>"+key +"</b>: "+props[key]+"</br>";}); | |
| html += "</p>"; | |
| return html; | |
| }; | |
| function forEachFeature(feature, layer) { | |
| var popupContent = it_properties(feature.properties); | |
| layer.bindPopup(popupContent); | |
| }; | |
| // Get GeoJSON data and create features. | |
| var data_layer = new L.GeoJSON(data, {attribution:"", onEachFeature: forEachFeature,}); | |
| map.fitBounds(data_layer.getBounds(), {padding: [12, 12]}) | |
| map.locate({setView: true, maxZoom: 16}); | |
| data_layer.addTo(map); | |
| </script> | |
| </html> | |
| EOF | |
| ) | |
| data=$(cat $infile) | |
| #echo "$data" | |
| echo "$html1$data$html2" > show.html | |
| out=$(cat show.html) | |
| if [ -z ${outfile+x} ]; then echo "No output file set"; else echo "$out" > "$outfile"; fi; | |
| if [ -z "$no_view" ]; | |
| then | |
| echo "showing file in browser" | |
| if [ -z "$browser" ]; | |
| then | |
| google-chrome show.html; | |
| else | |
| $browser show.html; | |
| fi | |
| fi |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you for the great work though - i just uploaded my gist here (it uses yours): https://gist.github.com/elbosso/77f50ad31457d97ad8286e3d1f914198