30:T568,md`A few minor tricks here: \`\`\`js setTimeout(() => map.updateSize()); \`\`\` We run this to make sure that the map ‘notices’ its size on screen - the timeout runs after the map is displayed on screen. Also: \`\`\`js view: new ol.View({ center: ol.proj.fromLonLat([-77.41, 37.5]), zoom: 10 }) \`\`\` Finicky projection support - or as geospatial professionals may call it, ‘good projection support’ has long been one of OpenLayers‘s distinguishing features. If you’re coming from Leaflet or Mapbox GL, you probably expect all coordinates passed to and from your map are longitude and latitude (or latitude, longitude).^* OpenLayers doesn’t play that way: it supports many projections, and by default it expects coordinates to be in… EPSG:3857, also known as Spherical Mercator. Which, well - most people use Spherical Mercator as a way to display their maps, but few store data in it. So, well, accepting coordinates by default in EPSG:3857, perhaps, technically correct

, but not what anyone wants. So - well, make sure to use [ol.proj.fromLonLat](http://openlayers.org/en/latest/apidoc/ol.proj.html#.fromLonLat) or otherwise set the _projection_ option of most constructs in OpenLayers, lets you end up in the wrong place. ---`31:[] 2e:{"title":"Using OpenLayers","cells":[{"id":0,"value":"md`# Using OpenLayers\n\nOpenLayers is the original flavor of open source web mapping: it was the first viable alternative to the Google Maps API, first released in 2006. It’s now on version 4, after a full rewrite to slicker, faster code.\n\nIt’s very powerful - and pretty easy to use with Observable! Here’s how we include and use it:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`Here’s the produced map - you can zoom and pan around in here. We show the map by calling \\`.getTargetElement\\` on a map object we’ve created.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"map.getTargetElement()","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"md`No trick to including OpenLayers: just use \\`require\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"ol = require('openlayers@4')","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`Same with its stylesheet: you’ll need to include the stylesheet from unpkg with a normal link tag.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"md`Now we create the [map object](http://openlayers.org/en/latest/apidoc/ol.Map.html).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"map = {\n let map = new ol.Map({\n layers: [\n new ol.layer.Tile({\n source: new ol.source.OSM()\n })\n ],\n target: html`

`,\n view: new ol.View({\n center: ol.proj.fromLonLat([-77.41, 37.5]),\n zoom: 10\n })\n });\n setTimeout(() => map.updateSize(), 1);\n return map;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}