I'm new with Mapbox and Leaflet and after checking out the leaflet-directive and Mapbox documentation I can get example maps to work but now when I integrate the two and use the URL I must work with, http://a.tiles.mapbox.com/v3/myMap.map-12341234.html for example.
This should be simple enough however I'm having an issue where the map is white.
my HTML looks like
<leaflet tiles="tiles"defaults="defaults"></leaflet>
and the js
angular.extend($scope, {
// tiles: 'http://a.tiles.mapbox.com/v3/myMap.map-12341234.html',
tiles: 'myMap.map-12341234',
defaults: {
scrollWheelZoom: false
}
});
})
how can I embed a url like my http://a.tiles.mapbox.com/v3/myMap.map-12341234.html
I'm not sure I understand you correctly, Are you just trying to use leaflet with your custom Mapbox style? If that is the case, heres a example:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Plain Leaflet API</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = '<your access token here>';
// Replace 'mapbox.streets' with your map id.
var mapboxTiles = L.tileLayer('https://api.mapbox.com/v4/myMap.map-12341234/{z}/{x}/{y}.png?access_token=' + L.mapbox.accessToken, {
attribution: '© Mapbox © OpenStreetMap'
});
var map = L.map('map')
.addLayer(mapboxTiles)
.setView([42.3610, -71.0587], 15);
</script>
</body>
</html>
Hope this helps you out!
Related
I want to remove the roads from an OSM map which I am displaying with Leaflet in an AngularJs app.
This question says that roads can't be removed, but that one can use a layer provider which has background images with no roads.
It even gives an example in R - but, alas, I don't know R.
Given that I declare my map thus in AngularJs:
const map = L.map('map').setView([51.178882, -1.826215], 16);
Self.map = map;
const osmUrl = "<a href='http://www.openstreetmap.org'>Open StreetMap</a>";
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: '© ' + osmUrl,
maxZoom: 18,
}).addTo(map);
how do I change the title provider to Esri.WorldShadedRelief? Preferably in such a way that I can toggle tile providers when the user clicks a button.
Just use a different tile provider (check here for Esri.WorldShadedRelief) and use also the example on one of leaflet' s tutorials to change the tile providers using a L.control. Here is how it looks like in vanilla leaflet since I do not know how you have structured your angularjs project but I am pretty sure it can be adjusted easily.
<!DOCTYPE html>
<html>
<head>
<title>Layers Control Tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<style>
html,
body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var cities = L.layerGroup();
L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
var OpenStreetMap_Mapnik = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var Esri_WorldShadedRelief = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}';
var openstreet = L.tileLayer(OpenStreetMap_Mapnik, {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
});
var esri = L.tileLayer(Esri_WorldShadedRelief, {
attribution: 'Tiles © Esri — Source: Esri',
maxZoom: 13
});
var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
layers: [openstreet, esri]
});
var baseLayers = {
"OpenStreetMap_Mapnik": openstreet,
"Esri_WorldShadedRelief": esri
};
var overlays = {
"Cities": cities
};
L.control.layers(baseLayers, overlays).addTo(map);
</script>
</body>
</html>
From what I gather the below code is the minimum necessary to run Angular Google Maps, but it won't show the map on screen. Looking at #my-map component in Chrome, it shows 0x0px and I haven't been able to change that despite the css and dynamic height declarations. Apart from that it seems to be running fine, there are no console errors and the appMaps module is at least initialized correctly.
<!DOCTYPE html>
html>
<head>
<title>New Map</title>
<style>
html, body {
height: 2000px;
width: 100%;
margin: 0;
padding: 0;
}
.angular-google-map-container { height: 400px; }
</style>
<script src="lodash/lodash.js"></script>
<script src="angular/angular.js"></script>
<script src="angular-google-maps/dist/angular-google-maps.js"></script>
<script>
var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']);
appMaps.config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: 'My Key Is Entered Here',
v: '3.20',
libraries: 'weather,geometry,visualization'
});
});
appMaps.controller('mainCtrl', function($scope) {
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
$scope.$on('$viewContentLoaded', function () {
var mapHeight = 400; // or any other calculated value
$("#my-map .angular-google-map-container").height(mapHeight);
});
});
</script>
</head>
<body>
<h1>TEST</h1>
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map id="my-map" center="map.center" zoom="map.zoom"></ui-gmap-google-map>
</div>
</body>
</html>
Edit: Yep, so Roux was correct, added the google maps API script (with key) at the top and angular-simple-logger after angular and that lead me pretty close. Then I just needed to add ng-app="appMaps" to the body element (I'm new to angular in general) and it worked. Thanks!
By following the Quickstart, you can see that you missed to call a few library/api.
Add the angular-simple-logger.js in your project (I think it comes with angular-ui packages or angular-google-maps)
Don't forget to add the google api, without it, nothing will work. <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
I'm developing an app in AngularJs, which has to display a server generated pdf to the user.
Using pdf.js I successfully downloaded and displayed a pdf, the issue is that now I have to provide to the user a functionality to print it.
I see two ways:
When the button is clicked, open a new window and re-download the pdf to show the print preview. But this'll overload the server;
Download the pdf somewhere with angular, and let pdf.js only to render it, then to print use the previous approach only with a local file. But I don't know where save the file.
I'm missing something, there are other ways?
Thank you.
Have a look at the PDF.js demo app - it includes a print button!
https://mozilla.github.io/pdf.js/web/viewer.html
There is an npm package which can do exactly this https://github.com/legalthings/angular-pdfjs-viewer
Usage
<!DOCTYPE html>
<html ng-app="app" ng-controller="AppCtrl">
<head>
<title>Angular PDF.js demo</title>
<script src="bower_components/pdf.js-viewer/pdf.js"></script>
<link rel="stylesheet" href="bower_components/pdf.js-viewer/viewer.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-pdfjs-viewer/dist/angular-pdfjs-viewer.js"></script>
<script src="app.js"></script>
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.some-pdf-container { width: 100%; height: 100%; }
</style>
</head>
<body>
<div class="some-pdf-container">
<pdfjs-viewer src="{{ pdf.src }}"></pdfjs-viewer>
</div>
</body>
</html>
I am using openlayers 3 (http://openlayers.org/) and i am trying to load an osm file in my map. In the old version of openlayers this task is very simple (http://wiki.openstreetmap.org/wiki/OpenLayers_osm_file_example) but now using openlayers 3 i cannot do a similar thing.
Any suggestion?
A Simple "OpenLayers 3" (Open Street Maps) Example
If you are trying to use OpenLayers 3 you might try using the https://openlayers.org/en/latest/doc/quickstart.html example it works locally really well and is fairly simple JavaScript.
OpenLayers (Open Street Maps)
uses the following two files in the code...
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.1.1/build/ol.js"></script>
<link rel="stylesheet"
href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.1.1/css/ol.css">
https://openlayers.org/en/latest/doc/quickstart.html
Here is the code from the above example if you need to test it out locally on your computer.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.1.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.1.1/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
When I execute the following extJS code, it shows me "undefined" instead of the text that I want to insert into the div.
result
How do I insert HTML into my extJS element?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<style type="text/css">
body {
padding: 20px;
}
div#message {
margin: 10px 0 0 0;
}
</style>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<title>Simple extJS</title>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.onReady(function() {
console.info('check to see if this shows up in firebug');
Ext.get('buttonInfo').on('click', function() {
var message = Ext.get('message');
message.insertHtml('this is the information');
});
});
</script>
</head>
<body>
<button id="buttonInfo">Info</button>
<div id="message"></div>
</body>
</html>
#flo, if i use innerHTML it is not recognized on the extJS object:
More attempts that didn't work
Edit:
Sorry, missed important bits of your question.
Don't know extJS, I'm afraid.
I'm still wondering if it wouldn't be simpler just to use the regular DOM, as this seems to be what you're trying to achieve anyway:
var x=document.getElementById("message");
x.innerHTML = 'this is the information';
Edit2: After a bit of searching, I came up with this:
var message = Ext.get('message');
Ext.DomHelper.insertHtml('afterBegin', message, 'this is the information');
Edit3: This answer is a mess, but here we go:
Ext.DomHelper.insertHtml('afterBegin', message.dom, 'this is the information');
or
message.update('text');
I finally found the answer:
message.insertHtml('beforeThis', 'insert this');
the first parameter can be one of these:
beforeBegin, afterBegin, beforeEnd, afterEnd
if you want to just change the text, as in jquery .html(), use:
message.update('new content');