Skip to content

Instantly share code, notes, and snippets.

@curlybracketsco

curlybracketsco/prettymapapp.js

Last active April 6, 2016 14:38
Show Gist options
  • Save curlybracketsco/d1207c2096d57cdd092391297f5d12ab to your computer and use it in GitHub Desktop.
Save curlybracketsco/d1207c2096d57cdd092391297f5d12ab to your computer and use it in GitHub Desktop.
Download ZIP
Beautiful Maps with Leaflet.js and Stamen tiles (More info and live demo here: http://curlybrackets.co/blog/2016/04/06/beautiful-maps-leaflet-stamen-tiles/)
Raw
prettymapapp.js
var app = angular.module('prettymapapp', ['leaflet-directive']);
app.controller("MapController", [ "$scope", "$http", function($scope, $http) {
var AddCurrentLocationToMap = function(p){
$scope.mapCenter.lat = p.coords.latitude;
$scope.mapCenter.lon = p.coords.longitude;
$scope.mapCenter.zoom = 14;
}
navigator.geolocation.getCurrentPosition(AddCurrentLocationToMap);
$scope.setNewCentre = function(res){
console.log(res);
$scope.mapCenter.lat = parseFloat(res.lat);
$scope.mapCenter.lng = parseFloat(res.lon);
$scope.searchResults = [];
$scope.showInfoBox = false;
}
angular.extend($scope, {
defaults:{
maxZoom: 16
},
mapCenter: {
lat: 54,
lng: -2.5,
zoom: 5
},
layers:{
baselayers: {
stamen_watercolor: {
name: 'watercolor',
url: "http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg",
layerOptions: {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.',
"showOnSelector": false,
updateWhenIdle: false,
reuseTiles: true
},
type: 'xyz'
}
},
overlays:{
stamen_toner: {
name: 'Show Street Names',
url: "http://tile.stamen.com/toner-labels/{z}/{x}/{y}.png",
layerOptions: {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.',
opacity: 0.4,
"showOnSelector": false,
detectRetina: true,
updateWhenIdle: true,
reuseTiles: true
},
type: 'xyz',
visible: true
}
}
}
});
$scope.toggleStreets = function(){
$scope.layers.overlays.stamen_toner.visible = !$scope.layers.overlays.stamen_toner.visible;
}
$scope.showInfoBox = false;
$scope.autoSearch = function(){
if($scope.queryText.length > 2) {
$scope.doSearch();
}
}
$scope.queryText = '';
$scope.searchResults = '';
$scope.doSearch = function(){
if($scope.queryText && $scope.queryText.length > 0) {
console.log('Searching for ' + $scope.queryText);
var url = "http://nominatim.openstreetmap.org/search?format=json&q=" + $scope.queryText;
$http.get(url).
success(function(data, status, headers, config) {
console.log(data);
$scope.searchResults = data;
}).
error(function(data, status, headers, config) {
// log error
});
}
}
}]);
Raw
prettymapindex.html
<!DOCTYPE html>
<html ng-app="prettymapapp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="angular-leaflet-directive.min.js"></script>
<script src="angular-simple-logger.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="prettymapapp.js" charset="UTF-8"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="cwstyles.css">
</head>
<body ng-controller="MapController">
<div id='mapArea'>
<leaflet center="mapCenter" layers="layers" defaults="defaults" width="100%" height="100%"></leaflet>
</div>
<div id='controlBox'>
<div ng-hide='showInfoBox' ng-click='showInfoBox=!showInfoBox' class='infoBoxButton'><i class="fa fa-bars fa-2x"></i></div>
<div ng-show='showInfoBox' ng-click='showInfoBox=!showInfoBox' class='infoBoxButton' style='text-align:right;'><i class="fa fa-times fa-2x"></i></div>
<div ng-show='showInfoBox' class='infoBox'>
<form ng-submit="doSearch()" class="ng-pristine ng-valid">
<input type="search" ng-model="queryText" ng-model-options="{ debounce: 400 }" ng-change="autoSearch()" style='width:90%' placeholder="Search for a place...">
<!-- <input class="btn-primary" type="submit" value="Search"> -->
</form>
<div class="list-group">
<div class="list-group-item" style='cursor:pointer;' ng-repeat='res in searchResults | limitTo:5'>
<div ng-click='setNewCentre(res);'>{{res.display_name}}</div>
</div>
</div>
<input type="checkbox" ng-model="layers.overlays.stamen_toner.visible"><span ng-click="toggleStreets()" style='cursor: pointer; vertical-align:middle; margin-left:3px;'>Show Street Names</span>
<div style="border-top:1px solid #ccc; margin: 14px 0; padding:6px;">
<h4>About</h4>
<p>Pretty mapping demo overlaying <a href='http://www.stamen.com'>Stamen</a>'s Toner labels map on their Watercolor map to produce a map that's both beautiful and functional.</p>
<p>Built with <a href='https://angularjs.org/'>AngularJS</a> and <a href='http://leafletjs.com/'>Leaflet</a> with help from the <a href='https://github.com/tombatossals/angular-leaflet-directive'>angular-leaflet-directive</a>.</p>
</div>
<div style='text-align:center; font-size: 10pt;' ng-non-bindable>A toy by <a href='http://curlybrackets.co'>{.co}</a></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment