Here are some of my favorite code samples I’ve collected on my CodePen account over the past few years.
Centered Modal Geolocation Search
Live-Updating Protobuf Data on the Map
3D Smooth Animated Zooming
This CodePen demonstrates the speed and easing options when moving between locations in the map.
Two-Column Map/Widget Layout
Show Feature Popup on Mouse Hover
When the mouse is hovering over a feature, this CodePen shows the Popup - debounced so that it only shows up when the mouse pauses.
“Hold Ctrl to Zoom” When Scrolling Past the Map
Similar to Google Maps, in this CodePen if the user is scrolling past the map on the page it will not zoom, but will also show a message telling the user they can “Use Ctrl + scroll to zoom the map.”
Random Initial Location
Using some similar logic from above, this CodePen allows the user to place a bunch of random point locations on the map every time a button is clicked.
Add a Feature Layer via URL
This CodePen adds a simple form element where the user can copy/paste their own Feature Layer url and see it on the map.
Custom Widget Management
Add a Header to the Expand Widget
This CodePen adds a header to the Expand Widget, which might be useful for situations in which you want to add instructions of explanatory text in the Expand widget.
Animate Go To Extent
This CodePen has a button to animate the zoom into a location on the map. It’s pretty simple, just call
I periodically write about technology, maps, open data, and other software topics. To get updates about new posts: