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 |
may I suggest to check wether xdg-open exists and if so - and no browser is explicitely asked for - to use that instead of google-chrome as default - so everyone gets their favourite browser...
Thank you for the great work though - i just uploaded my gist here (it uses yours): https://gist.github.com/elbosso/77f50ad31457d97ad8286e3d1f914198
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks so much for uploading this script!!! as simple as it gets.
Clean and simple, beautiful!!!!