Web Mapping Tools
https://github.com/NCAR/chords/wiki/JSON-vs-GeoJSON location-based-app-with-geodjango-tutorial
Pan and Zoom animating SVG viewbox
reset-reasoning geospatial-data-in-python-database-desktop-and-1 45:19 mplleaflet.show(fig=ax.figure, crs=df_wgs84.crs) https://www.youtube.com/watch?v=VokeBZarsNM Spatial Interaction Modelling PySAL: Spatial Analysis Library
Upgrading Google Maps JavaScript API from v2 to v3 Google (v3) Layer Example Google Places next_page
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
&q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>
Survey of the Best Online Mapping Tools
import osgeo.ogr
shapefile = osgeo.ogr.Open("tl_2009_us_state.shp")
numLayers = shapefile.GetLayerCount()
print "Shapefile contains %d layers" % numLayers
print
for layerNum in range(numLayers):
layer = shapefile.GetLayer (layerNum)
spatialRef = layer.GetSpatialRef().ExportToProj4()
numFeatures = layer.GetFeatureCount()
print "Layer %d has spatial reference %s" % (layerNum, spatialRef)
print "Layer %d has %d features:" % (layerNum, numFeatures)
print
for featureNum in range(numFeatures):
feature = layer.GetFeature(featureNum)
featureName = feature.GetField("NAME")
print "Feature %d has name %s" % (featureNum, featureName)
OpenLayers
根據 OpenLayers 3 Beginner's Guide 表示，新版在效能和行動裝置支援度都提昇了，可參考 http://map.geo.admin.ch/ 結合 Open Geo 範例。
參考範例在 my.theme 模組裡註冊一個 Browser View 來顯示地圖，出現問題，把 Products.CMFPlone/browser/templates/main_template.pt 第 37 行取消執行，可以臨時解決。
Layer 是地圖的基礎，可以動態調整透明度和順序，分成 Base Layer 和 Overlay Layer，再利用 Vector Layer 顯示主題圖標。
View 用來設定 Center, Zoom, Projection，可以透過 Map({view: view}) 或 map.setView(view) 來生效。
Map 內含 Layer, View 等的設定資訊。
Target 通常搭配 DOM ID 例如 'map'。
Interaction 可以控制 Drag Rotate Zoom 動作。
Control 可以控制 FullScreen 動作。
Renderer 可以設定為 'canvas' 'dom' 'webgl'。
Animation 可以控制 Bounce Pan 動作。
OpenLayers.Util.getImageLocation("marker.png")
雙視窗對照 Linking Two Views
Projection: HDMS 和 DMSH 是投影格式?
Map 都需要指定 Project 資訊，但 Zoomify Layer 搭配的圖檔並沒有定位，必須額外指定投影資訊作為顯示時的參考。
$ wget http://github.com/openlayers/ol3/releases/download/v3.18.2/v3.18.2.zip $ unzip v3.18.2.zip $ cp v3.18.2/css/ol.css v3.18.2/build/ol.js /path/to/my/theme/browser/static
Custom Animation: postcompose and vectorContext
簡易整合範例: 要優先使用範例網站裡的 CSS 和 JS 檔案，它們可能和官網下載的內容結構不同。
- 建立 Browser View 命名為 map-view 把範例 CSS JS 檔案放進 Resource Folder 裡
- Template 的資源檔案網址要更換 可利用 <metal:styleslot fill-slot="style_slot"><link rel="" ...></metal:styleslot>
// register an event handler for the click event
map.on('click', function(event) {
var coord = event.coordinate;
// transform to decimal degrees
var degrees = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326');
// format a human readable version
var hdms = ol.coordinate.toStringHDMS(degrees);
// update the overlay element's content
var element = overlay.getElement();
element.innerHTML = hdms;
// position the element
overlay.setPosition(coord);
map.addOverlay(overlay);
});
// create a DOM Input helper for the checkbox
var visible = new ol.dom.Input(document.getElementById('visible'));
// and bind its 'checked' property to the layer's 'visible' property
visible.bindTo('checked', layer, 'visible');
Add GeoJSON Layer: ol.source.GeoJSON() vs ol.format.GeoJSON().readFeatures() Change Layer Source URLs
source: new ol.source.Vector({
format: new ol.format.GeoJSON({
defaultDataProjection: 'EPSG:4326'
}),
- url: '++resource++my.map/world_capitals.geojson',
+ url: 'world_capitals.geojson',
直接使用 GeoJSON 檔名，預設會讀取現行目錄裡的檔案，讓更新工作更有彈性。
Using Properties to Style Features Set Fill Style in Polygon GeoJSON Feature Style
OpenLayers.js 跟 OpenLayers.light.js 跟 OpenLayers.mobile.js 的差別
OpenLayers Script 名稱不是 OpenLayers.js 時，必須確認 Default Theme 被載入：
<link rel="stylesheet" href="/path/to/default/style.css" type="text/css">
OpenLayers function endDrag(bbox) bbox-selector
Google Base Layers Not Displayed Unless Satellite Selected
D3 Integration Using D3.js for GeoData Visualization D3 + Leaflet
d3.json("world-110m2.json", function(error, topology) {
g.selectAll("path")
.data(topojson.object(topology, topology.objects.countries)
.geometries)
.enter()
.append("path")
.attr("d", path)
});
WMS Time Example timeline plugin: cluster strategy, time filtering, GeoJSON GeoRSS
Leaflet
Quick Start: 1) Prepare CSS + JS 2) <div id="mymap"></div> 3) JavaScript Codes
Enabling Initialization for Plone Template
WMS and TMS basemap-switcher timeline playback TimeSlider blockbuilder.org timeline
var grayscale = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: mapboxAttribution}),
streets = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: mapboxAttribution});
var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
layers: [grayscale, cities]
});
Leaflet Tutorial legend color
var legend = L.control({position: 'bottomleft'});
legend.onAdd = function (mylgd) {
var div = L.DomUtil.create('div', 'info legend');
div.innerHTML = "<svg height='22' width='22' style='vertical-align: middle'><circle cx='10' cy='10' r='7' stroke-width='3' stroke='#3388ff' stroke-opacity='1' fill='#3388ff' fill-opacity='0.8'></circle></svg>Group A<br><svg height='22' width='22' style='vertical-align: middle'><circle cx='10' cy='10' r='7' stroke-width='3' stroke='orange' stroke-opacity='1' fill='orange' fill-opacity='0.8'></circle></svg>Group B";
return div;
};
legend.addTo(mymap);
https://mapstory.org/layers/geonode:ISIS_Terr
http://www.montagneaperte.it/itinerarinellastoria/montefalco/
https://github.com/MapStory/mapstory-geonode/blob/master/manual_setup.md
http://docs.geonode.org/en/master/tutorials/devel/devel_intro/
Matplotlib Packages
