Showing posts with label Mapbox GL. Show all posts
Showing posts with label Mapbox GL. Show all posts

Tuesday, April 27, 2021

If Van Gogh Made Maps


Here's roughly other footling Mapbox GL created map. The Van Gogh Map uses a few images from Van Gogh paintings every bit textures for the map characteristic types.

Feature types on this map, such every bit H2O as well as unlike types of province cover, are made upwards of map tiles created alongside textures taken from Van Gogh paintings. The lawsuit is a map agency which yous in all likelihood wouldn't desire to purpose real oft exactly the map does serve every bit a bully demo of how slowly it is to practise interesting map styles alongside Mapbox GL.

This is the minute Mapbox GL map I've seen this week. The first, Birthplaces of Liverpool Football Club Players, is a handy footling demo map showing how to add together markers alongside text labels inwards Mapbox GL.

Tuesday, April 20, 2021

Walk The Map


Here is some other fun piddling Mapbox GL demo. The Walk Map allows you lot to navigate roughly a map using your cursor keys. That may non audio similar a lot of fun exactly it is a rather swell demonstration of the Mapbox GL rotate event.

Using the upwards as well as downward buttons you lot tin john deed forwards as well as backwards on the map, spell the left as well as correct buttons let you lot to rotate the map. The map rotation is fired past times assigning a '+' or '-' value to the map heading every fourth dimension the user clicks on the left or correct mouse button.

This is the 3rd Mapbox GL map I've seen since the introduction of Mapbox's novel mapping library. You powerfulness too similar to banking venture gibe out the Van Gogh Map (which uses images for map tile textures) as well as the birthplaces of Liverpool Football Club players map (which is a overnice illustration of how to add together markers as well as text labels).

Sunday, April 11, 2021

Mapbox Satellite Update


Mapbox has begun adding novel satellite imagery from Worldview-3. Worldview-3 was launched 2 weeks agone in addition to is already providing unrivaled satellite imagery of the Earth, at 31 centimeter (12 inch) resolution.

Mapbox has at 1 time begun to add together satellite Imagery from Worldview-3 to Mapbox satellite view. The starting fourth dimension update to the imagery is but a pocket-size three km2 surface area around Madrid’s airport. This pocket-size update is plenty to encounter that Worldview-3 tin john last used yesteryear Mapbox to furnish detailed satellite imagery which is at to the lowest degree on a par alongside airplane captured aerial imagery.

The Mapbox blog has a actually overnice map of the novel satellite imagery, which is virtually equally impressive equally the imagery itself. The map highlights some of the especial captured yesteryear Worldview-3 at Madrid airdrome using the novel Mapbox GL mapping platform.

The map uses Mapbox GL's panTo, flyTo in addition to rotateTo methods to seamlessly pan in addition to rotate the map to novel locations. These place updates are fired yesteryear the user equally they scroll through the map sidebar. As the user scrolls through the data provided inwards the map sidebar the map automatically pans in addition to rotates to present the place beingness explored inwards the text.

Saturday, April 10, 2021

Story Maps Amongst Mapbox Gl


Yesterday I was impressed past times 2 even out maps created amongst Mapbox GL. The Mapbox Blog published a real keen map highlighting unopen to of the details inward their new satellite imagery for Madrid airport. The Guardian  also used Mapbox GL inward a characteristic on immigration inward Texas (to come across the map scroll downwardly to the department headed 'The affect of Migrants on Falfurrias').

Both of these maps brand job of Mapbox GL's panTo as well as rotateTo functions to seamlessly pan as well as spin the map to novel locations.

I was especially impressed amongst the Mapbox Blog map. This map cleverly uses the peak of an overlaid div chemical cistron to piece of work out when to pan as well as zoom the map to exhibit novel locations. As you lot scroll downwardly this map sidebar chemical cistron the map automatically updates to exhibit you lot the relevant location.

I was as well as then impressed I had to pocket the code. I used the Mapbox Blog's map code to brand this petty tour of the London Olympic Park.

Both The Guardian as well as Mapbox Blog maps include the choice to gracefully fallback to an choice Mapbox map for browsers which don't back upwardly Mapbox GL. I haven't done that amongst my map - as well as then to sentiment the map you lot volition bring to job a modern browser which supports Web GL.

Friday, February 26, 2021

Adding Markers Inwards Mapbox Gl


I wouldn't usually postal service this map showing the birthplaces of Liverpool Football Club players simply it is the commencement Mapbox GL created map inward the wild that I've seen which includes map markers. The map besides includes text labels amongst the markers as well as thence could furnish a useful origin for anyone looking to add together markers as well as / or text labels to a Mapbox GL map.

The Mapbox GL representative maps includes i demo showing how to add together markers to a map. That example, similar this map, shows you lot how to add together an icon for the marking as well as besides how to add together a text label to the marker. The Mapbox GL representative map besides shows you lot how to fashion the text label. However the Liverpool players map includes far to a greater extent than styling of the text labels than the Mapbox GL example, as well as thence could live on a useful direct for anyone interested inward adding text labels to their markers.

If you lot await at the origin code for the Liverpool players map you lot tin dismiss encounter how a halo is added to the text,

"text-halo-color": "white",
"text-halo-width": 1,
"text-halo-blur": 0.5,

You tin dismiss besides encounter inward this map how you lot tin dismiss command the size of the text label according to the zoom degree of the map. In this representative the text labels drib dead bigger equally you lot zoom inward on the map,

"text-size": { "stops": [[2, 6], [4, 8],[6,10],[8,12],[14,16]]

Currently Mapbox GL doesn't function on Internet Explorer (although Mapbox tell back upwardly for IE is coming soon). While IE isn't supported it is skilful do to add together a warning for IE users. This Liverpool players map doesn't include a warning simply the Mapbox GL examples department does include an representative of how you lot tin dismiss Check for Mapbox GL Browser Support as well as warning users amongst non-supported browsers.

Saturday, August 15, 2020

Mapping The History Of Manhattan's Growth


Urban Layers is an incredible novel mapped visualization of Manhattan's edifice history. The map uses edifice structure information from PLUTO alongside Mapbox GL to practice a highly responsive too interactive tool to explore the history of edifice structure inwards fundamental New York.

The time-line business office provides a bully tool to explore the edifice history of Manhattan. You tin purpose the time-line to sentiment how many buildings were constructed during whatever menstruation of Manhattan's history. The time-line also includes a graph showing the divulge of buildings built inwards each year.

The time-line command may also hold upward used to speedily animate through the whole of Manhattan's structure history inwards ready lengths of time. For example, y'all tin ready the time-line for whatever decade (say 1970-1980). You tin too hence drag the time-line command backwards too forwards to view Manhattan's structure past times decade.

The purpose of Mapbox GL agency that the information loads amazingly speedily on the map equally y'all cypher through the time-line. It also agency that y'all tin correct click on the map to accommodate the map orientation (when the map start loads West is to a greater extent than or less at the elevation of the map - which helps to jibe around of Manhattan onto your monitor /screen).

Friday, April 17, 2020

Around & Closed To The Eiffel Tower


OSM Buildings is a JavaScript library for visualizing OpenStreetMaps edifice geometry on interactive maps. Thanks to a novel present map using Mapbox GL you lot tin laissez passer notice explore OSM Bulidings from a completely novel perspective.

One of many non bad features inwards Mapbox GL is the Mapbox GL rotate event. Using the rotate effect inwards Mapbox GL allows you lot to modify the orientation of a map. In the novel OSM Buildings GL Preview this agency you lot tin laissez passer notice rotate the map as well as stance the 3d buildings from all angles.


On this page you lot tin laissez passer notice stance images of the Tate Modern inwards London amongst the map orientated to the due south as well as to the north. When using the OSM Buildings GL Preview map you lot remove to right-click on the map to outset rotating the map as well as left-click to plow off rotation.

Monday, March 30, 2020

3D Superlative Profiles


Mapbox has created a actually groovy bike road planning map for Washington DC which equally good provides a 3d dimensional meridian profile of the route.

Capital Bikeshare allows yous to driblet ii markers on a map to gear upwards your starting betoken in addition to destination. It in addition to then plant out a cycling road betwixt the closest Capital Bikeshare finish to your starting betoken in addition to the closest station to your destination.

The magic actually happens nonetheless when yous click on the 'elevation profile' button. If yous opened upwards the map inward a WebGL enabled browser the map volition argument to an oblique persuasion in addition to a 3d meridian profile volition locomote drawn on transcend of the entire route.


If yous right-click on the map yous tin post away rotate the map persuasion in addition to the 3d meridian profile magically rotates amongst map.

The map was created amongst Mapbox GL. The map degrades good if yous persuasion it on a non-WebGL enabled browser merely yous actually don't instruct the amount 3d effect.

Turf.js was used to ability the nearest wheel station search.