Skip to content

Commit d2d705c

Browse files
mattmakaimattmakai
committed
finish django maps post
1 parent 886247a commit d2d705c

File tree

6 files changed

+95
-99
lines changed

6 files changed

+95
-99
lines changed

‎content/posts/180519-django-maps-mapbox.markdown‎

Lines changed: 95 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -321,19 +321,20 @@ from django.shortcuts import render
321321

322322
def default_map(request):
323323
~~ # TODO: move this token to Django settings from an environment variable
324-
~~ # found in the Mapbox dashboard and getting started instructions
324+
~~ # found in the Mapbox account settings and getting started instructions
325+
~~ # see https://www.mapbox.com/account/ under the "Access tokens" section
325326
~~ mapbox_access_token = 'pk.my_mapbox_access_token'
326327
~~ return render(request, 'default.html',
327-
~~ {'mapbox_access_token':mapbox_access_token})
328+
~~ { 'mapbox_access_token': mapbox_access_token })
328329
```
329330

330331
The Mapbox access token should really be stored in the Django settings
331-
file, so we left a TODO note to handle that as a future step.
332+
file, so we left a "TODO" note to handle that as a future step.
332333

333334
Now we can try our webpage again. Refresh `localhost:8000` in your
334335
web browser.
335336

336-
<img src="/img/180519-django-maps/map-time-with-map.png" width="100%" class="shot rnd outl" alt="Screenshot of the Mapbox map showing up in our Django front end.">
337+
<img src="/img/180519-django-maps/map-time-with-map.jpg" width="100%" class="shot rnd outl" alt="Screenshot of the Mapbox map showing up in our Django front end.">
337338

338339
Sweet, we've got a live, interactive map! It's kind of weird thought how it
339340
is zoomed out to view the entire world. Time to customize the map using
@@ -344,6 +345,96 @@ a few JavaScript parameters.
344345
We can modify the map by changing parameters for the style, zoom level,
345346
location and many other attributes.
346347

348+
We'll start by changing the location that the initial map centers in
349+
on as well as the zoom level.
350+
351+
Re-open `djmaps/maps/templates/default.html` and modify the first
352+
highlighted lines so it ends with a commas and add the two new
353+
highlighted lines shown below.
354+
355+
```
356+
<!DOCTYPE html>
357+
<html>
358+
<head>
359+
<title>Interactive maps for Django web apps</title>
360+
<script src='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
361+
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
362+
</head>
363+
<body>
364+
<h1>Map time!</h1>
365+
<div id='map' width="100%" style='height:400px'></div>
366+
<script>
367+
mapboxgl.accessToken = {{ mapbox_access_token }};
368+
var map = new mapboxgl.Map({
369+
container: 'map',
370+
~~ style: 'mapbox://styles/mapbox/streets-v10',
371+
~~ center: [-77.03, 38.91],
372+
~~ zoom: 9
373+
});
374+
</script>
375+
</body>
376+
</html>
377+
```
378+
379+
The first number, -77.03, for the `center` array is the longitude
380+
and the second number, 38.91, is the latitude. Zoom level 9 is much
381+
closer to the city than the default which was the entire world at
382+
level 0. All of the customization values are listed in the
383+
[Mapbox GL JS API documentation](https://www.mapbox.com/mapbox-gl-js/api/).
384+
385+
Now refresh the page at `localhost:8000` to reload our map.
386+
387+
<img src="/img/180519-django-maps/map-updated-style-1.jpg" width="100%" class="shot rnd outl" alt="Updated map centered and zoomed in on Washington, D.C.">
388+
389+
Awesome, now we are zoomed in on Washington, D.C. and can still move
390+
around to see more of the map. Let's make a couple other changes to
391+
our map before wrapping up.
392+
393+
Again back in `djmaps/maps/templates/default.html` change the highlighted
394+
line for the `style` key to the `mapbox://styles/mapbox/satellite-streets-v10`
395+
value. That will change the look from an abstract map style to satellite
396+
image data. Update `zoom: 9` so that it has a comma at the end of the line
397+
and add `bearing: 180` as the last key-value pair in the configuration.
398+
399+
400+
```
401+
<!DOCTYPE html>
402+
<html>
403+
<head>
404+
<title>Interactive maps for Django web apps</title>
405+
<script src='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
406+
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
407+
</head>
408+
<body>
409+
<h1>Map time!</h1>
410+
<div id='map' width="100%" style='height:400px'></div>
411+
<script>
412+
mapboxgl.accessToken = {{ mapbox_access_token }};
413+
var map = new mapboxgl.Map({
414+
container: 'map',
415+
~~ style: 'mapbox://styles/mapbox/satellite-streets-v10',
416+
~~ center: [-77.03, 38.91],
417+
~~ zoom: 9,
418+
~~ bearing: 180
419+
});
420+
</script>
421+
</body>
422+
</html>
423+
```
424+
425+
Save the template and refresh `localhost:8000`.
426+
427+
<img src="/img/180519-django-maps/map-updated-style-2.jpg" width="100%" class="shot rnd outl" alt="Updated map with satellite imagery and street map overlay.">
428+
429+
The map now provides a satellite view with streets overlay but it is
430+
also... "upside down"! At least the map is upside down compared to how
431+
most maps are drawn, due to the `bearing: 180` value, which modified
432+
this map's rotation.
433+
434+
Not bad for a few lines of JavaScript in our Django application.
435+
Remember to check the
436+
[Mapbox GL JS API documentation](https://www.mapbox.com/mapbox-gl-js/api/)
437+
for the exhaustive list of parameters that you can adjust.
347438

348439

349440
## What's Next?

‎content/posts/180525-explain-products-developers.markdown‎

Lines changed: 0 additions & 95 deletions
This file was deleted.

‎static/img/180519-django-maps/map-time-with-map.jpg‎

84.2 KB
Loading

‎static/img/180519-django-maps/map-time-with-map.png‎

-467 KB
Binary file not shown.

‎static/img/180519-django-maps/map-updated-style-1.jpg‎

142 KB
Loading

‎static/img/180519-django-maps/map-updated-style-2.jpg‎

229 KB
Loading

0 commit comments

Comments
 (0)