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>
Related
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>
<!DOCTYPE html>
<html>
<head>
<!-- locally referred ExtJS library files -->
<link href="ExtjsLib/ext-all.css" rel="stylesheet"
<script type="text/javascript" src="ExtjsLib/ext-all.js"></script>
<script type="text/javascript" src="ExtjsLib/ext-base.js"></script>
<script type="text/javascript"> Ext.BLANK_IMAGE_URL = "ExtjsLib/s.gif"; </script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.Panel', {
renderTo: 'helloWorldPanel',
height: 200,
width: 600,
title: 'Hello world',
html: 'First Ext JS Hello World Program'
});
});
</script>
</head>
<body>
<div id="helloWorldPanel" />
</body>
</html>
What's wrong in my code.I am using ExtJS 3.4.1 version and I have referred the Extjs library files locally from 'ExtLib' folder. Its displaying just the blank page as output. please help.
This line:
<!-- locally referred ExtJS library files
should be this
<!-- locally referred ExtJS library files -->
If you don't close the comment everything is a comment.
Use Library Ext.all.debug.js instead of ext.base.js.
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!
I'm having a hard time getting Angular to work inside a Windows Universal App. I'm using Visual Studio 2015.
I'm trying to follow the instructions here: https://github.com/winjs/angular-winjs
In the html head section I have:
<!-- WinJS references -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>
<!-- angular -->
<script src="angular-winjs.js"></script>
When I run the app I get an error in the angular-winjs.js file:
var module = angular.module("winjs", []);
The error is that angular isn't defined.
So this could be something simple, but I'm having a hard time figuring out what the problem is.
The instructions say:
You must also add this module to your list of angular module
dependencies:
angular.module('your-module', ['winjs', 'other-module-you-depend-on', 'etc']);
I have no idea what my "list of angular module dependencies" is.. but since I can't even access angular I don't think that's the (main) problem.
You need WinJS libraries (ui.js, base.js and the style ui-light.css / ui-dark.css), AngularJS libraries (angular.js) and finally angular-winjs library (angular-win.js). In your code you are missing Angular library. That's why angularjs is still undefined.
Needed files to get started with angular-winjs:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/css/ui-light.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/base.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/ui.js"></script>
<script src="https://cdn.rawgit.com/winjs/angular-winjs/master/js/angular-winjs.js"></script></script>
Working sample for you to get started:
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Working sample</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/css/ui-light.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/base.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/ui.js"></script>
<script src="https://cdn.rawgit.com/winjs/angular-winjs/master/js/angular-winjs.js"></script></script>
<style>
<!-- You need define yourself the styles for templates -->
.win-listview {
width: 600px;
height: 300px;
border: solid 2px rgba(0, 0, 0, 0.13);
}
.miniTemp {
width: 282px;
height: 70px;
padding: 5px;
overflow: hidden;
display: -ms-grid;
}
</style>
</head>
<body>
<div ng-app="workingsample" ng-controller="ratingCtrl">
<!-- listview -->
<div>Selected count: {{selection.length}}, indexes: {{selection.toString()}}</div>
<win-list-view id="mylistview" item-data-source="ratings" selection="selection" items-reorderable="true">
<win-list-view-header>This is a ListView header</win-list-view-header>
<win-item-template>
<div class="miniTemp">
This list view item's rating is: {{item.data.rating}}
</div>
</win-item-template>
<win-list-layout></win-list-layout>
<win-list-view-footer>This is a ListView footer</win-list-view-footer>
</win-list-view>
</div>
<script>
angular.module("workingsample", ['winjs'])
.controller("ratingCtrl", ['$scope', function ($scope) {
$scope.ratings = [
{ "rating": "Too much" },
{ "rating": "Bigger than yours" },
{ "rating": "Too small yep" },
{ "rating": "Why me" },
{ "rating": "Rekt m9" }
];
$scope.selection = [];
}])
</script>
</body>
</html>
well I am trying to apply the PgroutingWorkshop using PHP, ExtJS, GeoExt and OpenLayers.
I fact in the tutorial, they are using ExtJS 3.3.1 I think and me the 4.2.1
First of all, they mentionned a JS script called ext-base that doesn't exist on the 4.2.1 version. I said, this can not be very important, so I applied every thing they said but nothing appears.
I tried another tutorial from the official website of geoExt without osm map and it doen't work neither.
here is the code :
<html>
<head>
<title>Une page GeoExt de base</title>
<script src="ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"></link>
<script src="OpenLayers/OpenLayers.js" type="text/javascript"></script>
<script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="GeoExt/resources/css/geoext-all-debug.css"></link>
<script type="text/javascript">
Ext.onReady(function() {
var map = new OpenLayers.Map();
var layer = new OpenLayers.Layer.WMS(
"Global Imagery",
"http://maps.opengeo.org/geowebcache/service/wms",
{layers: "bluemarble"}
);
map.addLayer(layer);
new GeoExt.MapPanel({
renderTo: 'usthb',
height: 400,
width: 600,
map: map,
title: 'A Simple GeoExt Map'
});
});
</script>
</head>
<body>
<div id="usthb" style="width:100% height=200% "></div>
<div id="navigator"></div>
</body>