Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Map plugin and page #276

Merged
merged 3 commits into from

2 participants

@asolove

This pull request adds a basic map plugin and page. I think it is a good common basis for adding other geographic features, like auto-detection of geographic data in data plugins or from locations mentioned in the edit history.

I am using mapquest, because they have a free, public API for loading open-source OpenStreetMap map tiles. They also have a convenient javascript api for adding annotations like points, regions, icons, etc. on top of the maps, comparable to Leaflet.

@WardCunningham

Awesome. I can't wait to see it. Next time include a screenshot for the chronically impatient.

@WardCunningham WardCunningham merged commit 50f29b6 into WardCunningham:master
@WardCunningham

I'm liking this plugin a lot, even as it struggles a little to get along with everything else going on in our interface.

I wonder if we could turn on and off the panning and zooming by entering into an edit mode on double-click. This would let drag mean move-plugin unless you were editing the map, then drag would mean pan.

The mapquest javascript seems to only want to put controls up on one map at a time anyway. Let's make it clear which one that should be by clicking into edit mode.

Another advantage of the mode would be that journal actions would only need to be recorded on exit.

Thanks for considering all this.

@asolove

Thanks for adding the extra documentation! I wasn't sure how to integrate this into the UI. Your suggestion reinforces the idea we had earlier of introducing an explicit edit mode. This is especially necessary on mobile, where people will be tapping and dragging without wanting to actually edit content. I will try adding this in and see how it feels.

@WardCunningham

Now is a good time for others to reread the conversation in Issue #261 and add pragmatic advice here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
4 .gitignore
@@ -7,8 +7,8 @@
/data
/spec/data
/client/js
-/client/node_modules
/client/plugins/*/test.js
/client/chart/
/client/garden/
-/server/express/node_modules
+node_modules
+npm-debug.log
View
36 client/plugins/map/map.coffee
@@ -0,0 +1,36 @@
+window.plugins.map =
+ bind: (div, item) ->
+ emit: (div, item) ->
+ wiki.getScript "http://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js", ->
+ div.css 'height', '300px'
+ options =
+ elt: div[0]
+ zoom: item.zoom || 13
+ latLng: item.latlng || {lat:40.735383, lng:-73.984655}
+ mtype: 'osm'
+ bestFitMargin: 0,
+ zoomOnDoubleClick: true
+
+ map = new MQA.TileMap options
+
+ MQA.withModule 'largezoom','viewoptions','geolocationcontrol','mousewheel', ->
+ map.addControl(new MQA.LargeZoom, new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5)))
+ map.addControl(new MQA.GeolocationControl, new MQA.MapCornerPlacement(MQA.MapCorner.TOP_RIGHT, new MQA.Size(10,10)))
+
+ spot = new MQA.Poi({lat:40.735383, lng:-73.984655})
+ map.addShape spot
+
+ MQA.EventManager.addListener map, 'dragend', (e) ->
+ center = map.getCenter()
+ item.latlng = { lat: center.lat, lng: center.lng }
+ plugins.map.save(div, item)
+
+ MQA.EventManager.addListener map, 'zoomend', (e) ->
+ item.zoom = e.zoom
+ plugins.map.save(div, item)
+
+ save: (div, item) ->
+ wiki.pageHandler.put div.parents('.page:first'),
+ type: 'edit',
+ id: item.id,
+ item: item
View
54 client/plugins/map/map.js
@@ -0,0 +1,54 @@
+(function() {
+
+ window.plugins.map = {
+ bind: function(div, item) {},
+ emit: function(div, item) {
+ return wiki.getScript("http://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js", function() {
+ var map, options, spot;
+ div.css('height', '300px');
+ options = {
+ elt: div[0],
+ zoom: item.zoom || 13,
+ latLng: item.latlng || {
+ lat: 40.735383,
+ lng: -73.984655
+ },
+ mtype: 'osm',
+ bestFitMargin: 0,
+ zoomOnDoubleClick: true
+ };
+ map = new MQA.TileMap(options);
+ MQA.withModule('largezoom', 'viewoptions', 'geolocationcontrol', 'mousewheel', function() {
+ map.addControl(new MQA.LargeZoom, new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5, 5)));
+ return map.addControl(new MQA.GeolocationControl, new MQA.MapCornerPlacement(MQA.MapCorner.TOP_RIGHT, new MQA.Size(10, 10)));
+ });
+ spot = new MQA.Poi({
+ lat: 40.735383,
+ lng: -73.984655
+ });
+ map.addShape(spot);
+ MQA.EventManager.addListener(map, 'dragend', function(e) {
+ var center;
+ center = map.getCenter();
+ item.latlng = {
+ lat: center.lat,
+ lng: center.lng
+ };
+ return plugins.map.save(div, item);
+ });
+ return MQA.EventManager.addListener(map, 'zoomend', function(e) {
+ item.zoom = e.zoom;
+ return plugins.map.save(div, item);
+ });
+ });
+ },
+ save: function(div, item) {
+ return wiki.pageHandler.put(div.parents('.page:first'), {
+ type: 'edit',
+ id: item.id,
+ item: item
+ });
+ }
+ };
+
+}).call(this);
View
14 client/plugins/map/pages/map
@@ -0,0 +1,14 @@
+{
+ "title": "Map",
+ "story": [
+ {
+ "id": "40aca0157e6f8cf4",
+ "type": "map"
+ },
+ {
+ "text": "This is a map",
+ "id": "85f2901bdbdcedf8",
+ "type": "paragraph"
+ }
+ ]
+}
Something went wrong with that request. Please try again.