29:null 2a:["$","title",null,{"children":"Map | Maxime HEBRARD | Observable"}] 2f:T1ae6,viewof map = { const target = html`

`; // const target = html`

` // const target = html`

` //const target = html`

` yield target; // Give the container dimensions. // Create Markers from pins array const markers = pins.map(p => { // Create marker // Set Coordinate (We need to transform the coordinates from Longitude/Latitude to WebMercator) const marker = new ol.Feature( new ol.geom.Point( ol.proj.fromLonLat([ Number(p['longitude']), Number(p['latitude']) ]) ) ); // Set Type marker.set('type', p['type']); // Return return marker; }); // Sources of layers const sourceOSM = new ol.source.OSM(); const sourceCountries = new ol.source.Vector({ url: "https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_10m_admin_0_countries_lakes.geojson", format: new ol.format.GeoJSON() }); const sourceStates = new ol.source.Vector({ url: "https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_10m_admin_1_states_provinces_lakes.geojson", format: new ol.format.GeoJSON() }); var sourcePins = new ol.source.Vector({ features: markers }); // Define cluster var clusterPins = new ol.source.Cluster({ distance: parseInt(distance, 10), source: sourcePins }); // Compute styles const styleClusters = function(feature) { let style; // for current cluster, get feature list const features = feature.get('features'); // const length = features.length; // check number of types in the cluster const types = features.reduce((tot, r) => { if (!tot[r.get('type')]) { tot[r.get('type')]=0; } tot[r.get('type')]++; return tot; },{}); // if only one feature if (Object.keys(types).length == 1) { style = icons[features[0].get('type')]; } else { // Else circle style = icons[0]; } // Text if (features.length > 1) { style.getText().setText(features.length.toString()); } else { style.getText().setText(""); } return style; } const styleMarks = function(feature) { let style; // for current cluster, get feature list const features = feature.get('features'); // const length = features.length; // check number of types in the cluster const types = features.reduce((tot, r) => { if (!tot[r.get('type')]) { tot[r.get('type')]=0; } tot[r.get('type')]++; return tot; },{}); // if only one feature if (Object.keys(types).length == 1) { style = icons[features[0].get('type')]; } else { // Else circle style = icons[0]; } // Text if (features.length > 1) { style.getText().setText(features.length.toString()); } else { style.getText().setText(""); } return style; } // Layers let layersArray = []; if (layers.indexOf("raster") > -1) { layersArray.push( new ol.layer.Tile({ source: sourceOSM }) ); } if (layers.indexOf("countries") > -1) { layersArray.push( new ol.layer.Vector({ source: sourceCountries, style: new ol.style.Style({ fill: fills['land'], stroke: strokes['black'] }) }) ); } if (layers.indexOf("states") > -1) { layersArray.push(new ol.layer.Vector({ source: sourceStates, style: new ol.style.Style({ fill: fills['land'], stroke: strokes['black'] }) })); } if (layers.indexOf("marks") > -1) { layersArray.push(new ol.layer.Vector({ source: sourcePins })); } if (layers.indexOf("clusters") > -1) { layersArray.push(new ol.layer.Vector({ source: clusterPins, style: styleClusters })); } // Define map // Default is the Web Mercator projection (EPSG:3857). Projection used for OpenStreetMap, Bing or Google Maps. // const map = target.value = new ol.Map({ const map = new ol.Map({ layers: layersArray, target: 'map-container', view: new ol.View({ center: ol.proj.fromLonLat(center), zoom: zoom }) }); // export options for html-to-image. See: https://github.com/bubkoo/html-to-image#options var exportOptions = { filter: function(element) { return element.className.indexOf('ol-control') === -1; }, backgroundColor: water }; document.getElementById('export-png').addEventListener('click', function() { var i = 0 console.log('callback', 0) map.once('rendercomplete', function() { html_to_image.toPng(map.getTargetElement(), exportOptions) .then(function(dataURL) { var link = document.getElementById('image-download'); link.href = dataURL; link.click(); }); }); map.renderSync(); }); var dims = { a0: [1189, 841], a1: [841, 594], a2: [594, 420], a3: [420, 297], a4: [297, 210], a5: [210, 148] }; var exportButton = document.getElementById('export-pdf'); exportButton.addEventListener('click', function() { var i=2 console.log("clickHandler",i) // // exportButton.disabled = true; // // document.body.style.cursor = 'progress'; var format = document.getElementById('format').value; var resolution = document.getElementById('resolution').value; var dim = dims[format]; var width = Math.round((dim[0] * resolution) / 25.4); var height = Math.round((dim[1] * resolution) / 25.4); var size = map.getSize(); var viewResolution = map.getView().getResolution(); map.once('rendercomplete', function() { exportOptions.width = width; exportOptions.height = height; html_to_image .toJpeg(map.getViewport(), exportOptions) .then(function(dataUrl) { var pdf = new jsPDF('landscape', undefined, format); console.log('landscape', dim[0], dim[1]) pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]); pdf.save('map'+i+'.pdf'); // Reset original map size map.setSize(size); map.getView().setResolution(viewResolution); // exportButton.disabled = false; // document.body.style.cursor = 'auto'; }); }); // Set print size var printSize = [width, height]; map.setSize(printSize); var scaling = Math.min(width / size[0], height / size[1]); map.getView().setResolution(viewResolution / scaling); console.log("ok",i) }, false); // invalidation.then(() => map.dispose()); return target; }30:T668,style = (shape, fill, stroke = 'black', text = 'white') => { let s; switch(shape) { case 'square': s = new ol.style.Style({ image: new ol.style.RegularShape({ fill: fills[fill], stroke: strokes[stroke], points: 4, radius: 10, angle: Math.PI / 4 }), text: new ol.style.Text({ text: ' ', fill: strokes[text], stroke: strokes[text] }) }); break; case 'triangle': s = new ol.style.Style({ image: new ol.style.RegularShape({ fill: fills[fill], stroke: strokes[stroke], points: 3, radius: 10, rotation: Math.PI / 4, angle: 0 }), text: new ol.style.Text({ text: ' ', fill: strokes[text], stroke: strokes[text] }) }); break; case 'star': s = new ol.style.Style({ image: new ol.style.RegularShape({ fill: fills[fill], stroke: strokes[stroke], points: 5, radius: 10, radius2: 4, angle: 0 }), text: new ol.style.Text({ text: ' ', fill: strokes[text], stroke: strokes[text] }) }); break; default: s = new ol.style.Style({ image: new ol.style.Circle({ fill: fills[fill], stroke: strokes[stroke], radius: 10 }), text: new ol.style.Text({ text: ' ', fill: strokes[text], stroke: strokes[text] }) }); } return s; }31:[] 2d:{"id":"fa4937fafe9a5018","slug":null,"title":"Map","thumbnail":"bac3dd5c9267065adb2b2baf7e8dd39812a02df06619aea4e132a15380f63a24","access_level":"unlisted","create_time":"$D2019-11-16T06:49:08.520Z","update_time":"$D2019-12-16T10:39:03.292Z","view_time":null,"first_public_time":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"78bc7d72c3cb4593","login":"mhebrard","name":"Maxime HEBRARD","avatar_url":"https://avatars-next.observableusercontent.com/dce38f4313b5405c488dd83ccaa8e46d94ba18a8feb45c7dd3f7c0a28e3ff037","tier":"starter_2024"},"version":541,"publish_version":541,"role":null,"authored":false,"authors":[{"type":"individual","id":"bcf1943c3508d375","login":"mhebrard","name":"Maxime HEBRARD","avatar_url":"https://avatars-next.observableusercontent.com/dce38f4313b5405c488dd83ccaa8e46d94ba18a8feb45c7dd3f7c0a28e3ff037","tier":null}],"members":[{"type":"individual","id":"bcf1943c3508d375","login":"mhebrard","name":"Maxime HEBRARD","avatar_url":"https://avatars-next.observableusercontent.com/dce38f4313b5405c488dd83ccaa8e46d94ba18a8feb45c7dd3f7c0a28e3ff037","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Map","cells":[{"id":0,"value":"md`# Map\nMap from [OpenLayers](https://openlayers.org/).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":400,"value":"form = html`\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"md`Enter pins below in comma separated format`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"pins = d3.csvParse(`longitude,latitude,type\n0,0,A\n33,-1,A\n30,-3,B\n30,-2.5,B\n31,-2.5,C\n36,2,C\n37,2,C\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"// viewof height = text({title: \"Map heigth (in px)\", value: 400})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"viewof center = worldMapCoordinates({\n title: \"Select the center of the map\",\n description: \"\",\n value: [33, -1]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"viewof zoom = slider({\n min: 1, \n max: 20, \n step: 1,\n value: 5,\n title: \"Zoom\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"viewof layers = checkbox({\n title: \"Layers\",\n options: [\n { value: \"raster\", label: \"Raster\" },\n { value: \"countries\", label: \"Countries\" },\n { value: \"states\", label: \"States\"},\n { value: \"marks\", label: \"Marks\" },\n { value: \"clusters\", label: \"Clusters\" }\n ],\n value: [\"raster\", \"states\", \"clusters\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":177,"value":"viewof distance = slider({\n min: 0, \n max: 1000, \n step: 10, \n value: 20, \n title: \"Distance between clusters\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":281,"value":"icons = { return {\n 0: style('default', 'gray', 'white'),\n A: style('square', 'red'),\n B: style('triangle', 'green'),\n C: style('star', 'blue')\n} }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"\nfills = { return {\n red: new ol.style.Fill({ color: '#e41a1c' }),\n blue: new ol.style.Fill({ color: '#377eb8' }),\n green: new ol.style.Fill({ color: '#4daf4a' }),\n purple: new ol.style.Fill({ color: '#984ea3' }),\n orange: new ol.style.Fill({ color: '#ff7f00' }),\n yellow: new ol.style.Fill({ color: '#ffff33' }),\n brown: new ol.style.Fill({ color: '#a65628' }),\n pink: new ol.style.Fill({ color: '#f781bf' }),\n gray: new ol.style.Fill({ color: '#999999' }),\n water: new ol.style.Fill({ color: water}),\n land: new ol.style.Fill({ color: land })\n}}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"strokes = { return {\n black: new ol.style.Stroke({ color: '#000000' }),\n white: new ol.style.Stroke({ color: '#ffffff' })\n}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":423,"value":"viewof water = color({\n value: \"#9CD3DB\",\n title: \"Water Color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":426,"value":"viewof land = color({\n value: \"#C6AB72\",\n title: \"Land Color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":404,"value":"html`

download...

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"md`Below, load Open Layers and other libraries...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":285,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"ol = {\n // OpenLayers doesn’t publish a build to npm, so we can’t use unpkg. :(\n const ol = await require(\"https://openlayers.org/en/v5.2.0/build/ol.js\").catch(() => window.ol);\n if (!ol.css) ol.css = document.head.appendChild(html``);\n return ol;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"import {worldMapCoordinates} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"import {button, checkbox, color, slider, text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":441,"value":"jsPDF = require('https://bundle.run/jspdf@1.5.3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":357,"value":"html_to_image = require('https://bundle.run/html-to-image@0.1.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"