-
-
Save ldonnet/584da74942c440be16a8 to your computer and use it in GitHub Desktop.
D3JS + Openlayers points
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
| body, html, #map { | |
| font-family: Arial, Helvetica, sans-serif; | |
| margin: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| path { | |
| fill: #000; | |
| fill-opacity: .2; | |
| stroke: #fff; | |
| stroke-width: 1.5px; | |
| } | |
| path:hover { | |
| fill: red; | |
| fill-opacity: .7; | |
| } | |
| div#pop-up { | |
| display: none; | |
| position:absolute; | |
| color: white; | |
| font-size: 14px; | |
| background: rgba(0, 0, 0, 0.5); | |
| padding: 5px 10px 5px 10px; | |
| -moz-border-radius: 5px 5px; | |
| border-radius: 5px 5px; | |
| z-index: 9999; | |
| } | |
| div#pop-up-title { | |
| font-size: 15px; | |
| width:300px; | |
| margin-bottom: 4px; | |
| font-weight: bolder; | |
| } | |
| div#pop-up-content { | |
| font-size: 14px; | |
| } | |
| div#pop-desc { | |
| margin-left: 10px; | |
| width: 300px; | |
| } | |
| div#pop-img { | |
| font-size: 30px; | |
| font-weight: bolder; | |
| } |
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
| <div id="map"></div> <a href="#" id="permalink" onclick="drawSVG();return false;">Permalink</a> | |
| <div id="pop-up"> | |
| <div id="pop-up-title"></div> | |
| <div id="pop-up-content"> | |
| <table> | |
| <tr> | |
| <td> | |
| <div id="pop-img"></div> | |
| </td> | |
| <td> | |
| <div id="pop-desc"></div> | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| <div id="slider"></div> | |
| <div id="docs"></div> |
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
| var map; | |
| var extent = [-20037508.34, -20037508.34, | |
| 20037508.34, 20037508.34]; | |
| $(function () { | |
| map = new OpenLayers.Map('map', { | |
| numZoomLevels: 20, | |
| projection: new OpenLayers.Projection("EPSG:900913"), | |
| displayProjection: new OpenLayers.Projection("EPSG: 4326"), | |
| maxExtent: extent, | |
| restrictedExtent: extent, | |
| controls: [ | |
| new OpenLayers.Control.Navigation(), | |
| new OpenLayers.Control.PanZoomBar(), | |
| new OpenLayers.Control.ScaleLine(), | |
| new OpenLayers.Control.MousePosition(), | |
| new OpenLayers.Control.KeyboardDefaults()] | |
| }); | |
| var ol_wms = new OpenLayers.Layer.WMS( | |
| "OpenLayers WMS", | |
| "http://vmap0.tiles.osgeo.org/wms/vmap0", { | |
| layers: 'basic' | |
| }); | |
| map.addLayers([ol_wms]); | |
| map.setCenter(new OpenLayers.LonLat(0, 0), 3); | |
| json = new Request.JSON({ | |
| url: '/gh/gist/response.json/584da74942c440be16a8/', | |
| data: {'delay': 1}, | |
| method: 'post' | |
| }).send() | |
| console.log(json) | |
| d3.json( json, function (collection) { | |
| var overlay = new OpenLayers.Layer.Vector("stations"); | |
| // Add the container when the overlay is added to the map. | |
| overlay.afterAdd = function () { | |
| var div = d3.selectAll("#" + overlay.div.id); | |
| div.selectAll("svg").remove(); | |
| var svg = div.append("svg"); | |
| g = svg.append("g"); | |
| var bounds = d3.geo.bounds(collection), | |
| path = d3.geo.path().projection(project); | |
| var feature = g.selectAll("path") | |
| .data(collection.features) | |
| .enter().append("path") | |
| .attr("d", path.pointRadius(function (d) { | |
| return Math.sqrt((Math.exp(parseFloat(d.properties.mag)))); | |
| })) | |
| .on("mouseover", function (d) { | |
| var mousePosition = d3.svg.mouse(this); | |
| var format = d3.time.format("%Y-%m-%d %HH:%MM:%SS"); | |
| $("#pop-up").fadeOut(100, function () { | |
| // Popup content | |
| $("#pop-up-title").html(format(new Date(parseInt(d.properties.time)))); | |
| $("#pop-img").html(d.properties.mag); | |
| $("#pop-desc").html(d.properties.place); | |
| // Popup position | |
| var popLeft = mousePosition[0] + 300 > screen.width ? mousePosition[0] - 400 : mousePosition[0]; | |
| var popTop = mousePosition[1]; | |
| $("#pop-up").css({ | |
| "left": popLeft + 50, | |
| "top": popTop | |
| }); | |
| $("#pop-up").fadeIn(100); | |
| }); | |
| }). | |
| on("mouseout", function () { | |
| $("#pop-up").fadeOut(50); | |
| }); | |
| map.events.register("moveend", map, reset); | |
| reset(); | |
| function reset() { | |
| var bottomLeft = project(bounds[0]), | |
| topRight = project(bounds[1]); | |
| svg.attr("width", topRight[0] - bottomLeft[0]) | |
| .attr("height", bottomLeft[1] - topRight[1]) | |
| .style("margin-left", bottomLeft[0] + "px") | |
| .style("margin-top", topRight[1] + "px"); | |
| g.attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")"); | |
| feature.attr("d", path); | |
| } | |
| function project(x) { | |
| var point = map.getViewPortPxFromLonLat(new OpenLayers.LonLat(x[0], x[1]) | |
| .transform("EPSG:4326", "EPSG:900913")); | |
| return [point.x, point.y]; | |
| } | |
| } | |
| map.addLayer(overlay); | |
| }); | |
| }); |
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
| name: D3JS + Openlayers point | |
| description: D3JS + Openlayers points | |
| authors: | |
| - Luc Donnet | |
| resources: | |
| - http://d3js.org/d3.v2.min.js?2.9.3 | |
| - http://openlayers.org/dev/OpenLayers.js | |
| normalize_css: no |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment