I have set up a project that uses require.js, backbone.js, openlayers (mobile single file build) and jquery mobile.
Now I have some issues displaying the map correctly, because no tiles are loading. I have figured out how to load the openlayers api with the require.js shim parameter:
shim: {
"backbone": {
"deps": [ "underscore", "jquery" ],
"exports": "Backbone"
},
"openlayers": {
"exports": "OpenLayers"
}
}
In the MapView.js file I create a new openlayers map:
define([ "jquery", "backbone", "openlayers" ], function( $, Backbone, OpenLayers ) {
var MapView = Backbone.View.extend( {
// The View Constructor
initialize: function() {
console.log(3);
var mapOptions = {
div: this.el,
maxExtent: new OpenLayers.Bounds(-174,18.4,-63.5,71),
maxResolution: 0.25,
projection: "EPSG:102100",
theme: "/css/theme/default/style.css",
layers: [
new OpenLayers.Layer.OSM("OpenStreetMap", null, {
transitionEffect: 'resize'
})
]};
this.map = new OpenLayers.Map( mapOptions );
},
render: function() {
console.log(4);
}
} );
return MapView;
} );
Now the map works partly. I can see the Zoom Buttons which are added by openlayers at the top-left of the map, but no Tiles are loaded. Firebug told me, that there isn't even a request for the tiles.
At the moment I have no clue whats the problem might be.
For completetion this is my backbone router:
define([ "jquery", "backbone", "../models/Map", "../views/Map" ], function( $, Backbone, MapModel, MapView ) {
var Router = Backbone.Router.extend( {
initialize: function() {
console.log(2);
this.mapView = new MapView( { el: "#mapView" } );
Backbone.history.start();
},
// Backbone.js Routes
routes: {
"": "home",
},
// Home method
home: function() {
console.log(0);
$.mobile.changePage( "#map" , { reverse: false, changeHash: false } );
},
});
return Router;
} );
and the Page html
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="/css/jquerymobile.css" />
<script src="/js/libs/require-min.js" data-main="/js/mobile"></script>
<style>
#mapView {
height: 500px;
width: 500px;
}
</style>
</head>
<body>
<div id="map" data-role="page" data-title="Map">
<div data-role="header">
<h1>Map</h1>
</div><!-- /header -->
<div data-role="content">
<div id="mapView"></div>
</div><!-- /content -->
</div>
</body>
</html>
Any ideas?
I figured it out now. All I had to do is add this.map.zoomToMaxExtent();. For some reason without that the map was not able to calculate the correct visible extent for the tiles.
Related
I set up a nice map in my rails application. Everything is working fine but I cannot style the map with SnazzyMaps.
Here is my map.js file:
import GMaps from 'gmaps/gmaps.js';
const mapElement = document.getElementById('map');
if (mapElement) { // don't try to build a map if there's no div#map to inject in
const map = new GMaps({ el: '#map', lat: 0, lng: 0 });
const markers = JSON.parse(mapElement.dataset.markers);
const mapMarkers = map.addMarkers(markers);
mapMarkers.forEach((marker, index) => {
marker.addListener('click', () => {
// map.setCenter(markers[index]);
markers[index].infoWindow.open(map, marker);
})
});
if (markers.length === 0) {
map.setZoom(2);
} else if (markers.length === 1) {
map.setCenter(markers[0].lat, markers[0].lng);
map.setZoom(14);
} else {
map.fitLatLngBounds(markers);
}
}
import { autocomplete } from '../components/autocomplete';
// [...]
autocomplete();
On SnazzyMaps they give the following example. My question is, where shall I insert which part of this code in my own file. Been trying it for a while now but cannot make it work. Here is SnazzyMaps example:
<!DOCTYPE html>
<html>
<head>
<title>Snazzy Maps Super Simple Example</title>
<style type="text/css">
/* Set a size for our map container, the Google Map will take up 100% of this container */
#map {
width: 750px;
height: 500px;
}
</style>
<!--
You need to include this script tag on any page that has a Google Map.
The following script tag will work when opening this example locally on your computer.
But if you use this on a localhost server or a live website you will need to include an API key.
Sign up for one here (it's free for small usage):
https://developers.google.com/maps/documentation/javascript/tutorial#api_key
After you sign up, use the following script tag with YOUR_GOOGLE_API_KEY replaced with your actual key.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY"></script>
-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 11,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(40.6700, -73.9400), // New York
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [{"featureType":"all","elementType":"geometry.fill","stylers":[{"weight":"2.00"}]},{"featureType":"all","elementType":"geometry.stroke","stylers":[{"color":"#9c9c9c"}]},{"featureType":"all","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#eeeeee"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#7b7b7b"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#c8d7d4"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#070707"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.6700, -73.9400),
map: map,
title: 'Snazzy!'
});
}
</script>
</head>
<body>
<h1>Snazzy Maps Super Simple Example</h1>
<h2>WY</h2>
<!-- The element that will contain our Google Map. This is used in both the Javascript and CSS above. -->
<div id="map"></div>
</body>
</html>
To set the style using Gmaps library, you need to define the styles and then set it to the current map as below:
const map = new GMaps({ el: '#map', lat: 0, lng: 0 });
var styles = [
{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 }
]
}, {
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}, {
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
map.addStyle({
styledMapName:"Styled Map",
styles: styles,
mapTypeId: "map_style"
});
map.setStyle("map_style");
Reference:
https://github.com/hpneo/gmaps/blob/master/examples/styled_maps.html
I'm using jQuery Mobile 1.3, and attempted to follow a tutorial in order to create my own custom widget.
I'm getting stuck on the very first step, and I'm not sure if I'm following the right example for the right version of jQuery mobile.
There is no error on the page, my element is just never enriched.
(function($) {
$.widget("mobile.target", $.mobile.button, {
/** Available options for the widget are specified here, along with default values. */
options: {
inline: false,
mode: "default",
height: 200
},
/** Mandatory method - automatically called by jQuery Mobile to initialise the widget. */
_create: function() {
var inputElement = this.element;
var opts = $.extend(this.options, inputElement.data("options"));
$(document).trigger("targetcreate");
inputElement.after("<button>" + inputElement.val() + "</button>");
},
/** Custom method to handle updates. */
_update: function() {
var inputElement = this.element;
var opts = $.extend(this.options, inputElement.data("options"));
$(document).trigger("targetupdate");
inputElement.siblings("button").text(inputElement.val());
},
/* Externally callable method to force a refresh of the widget. */
refresh: function() {
return this._update();
}
});
/* Handler which initialises all widget instances during page creation. */
$(document).bind("pagecreate", function(e) {
$(document).trigger("targetbeforecreate");
return $(":jqmData(role='target')", e.target).target();
});
})(jQuery);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<input type="button" data-role="target" value="inp1">
<input type="button" value="inp2">
<div data-role="target">div1</div>
<div type="button">div2</div>
</body>
</html>
(function($) {
$.widget("mobile.target", $.mobile.button, {
/** Available options for the widget are specified here, along with default values. */
options: {
inline: false,
mode: "default",
height: 200
},
/** Mandatory method - automatically called by jQuery Mobile to initialise the widget. */
_create: function() {
var inputElement = this.element;
var opts = $.extend(this.options, inputElement.data("options"));
$(document).trigger("targetcreate");
inputElement.after("<button>" + inputElement.val() + "</button>");
},
/** Custom method to handle updates. */
_update: function() {
var inputElement = this.element;
var opts = $.extend(this.options, inputElement.data("options"));
$(document).trigger("targetupdate");
inputElement.siblings("button").text(inputElement.val());
},
/* Externally callable method to force a refresh of the widget. */
refresh: function() {
return this._update();
}
});
/* Handler which initialises all widget instances during page creation. */
$(document).bind("pagecreate", function(e) {
$(document).trigger("targetbeforecreate");
return $(":jqmData(role='target')", e.target).target();
});
})(jQuery);
Expected output was a custom JQueryMobile button that inherits from the JQueryMobile button. Not just a tiny html5 button in a div. e.g. Div1 rendering the same as Div2 but with customized changes made.
You are trying to get an input element in jQuery code. But you defined a div element in the HTML page.
That is the problem. Change it to input.
Check the below code
The tutorial you followed states that only use the :jqmData if you didn't use the HTML5 data attribute. Remove it
(function($) {
$.widget("mobile.target", $.mobile.widget, {
options: {
inline: false,
mode: "default",
height: 200
},
_create: function() {
var inputElement = this.element;
var opts = $.extend(this.options, inputElement.data("options"));
$(document).trigger("targetcreate");
inputElement.after("<button>"+inputElement.val()+"</button>");
},
_update: function() {
var inputElement = this.element;
var opts = $.extend(this.options, inputElement.data("options"));
$(document).trigger("targetupdate");
inputElement.siblings("button").text(inputElement.val());
},
refresh: function() {
return this._update();
}
});
$(document).bind("pagecreate", function(e) {
$(document).trigger("mywidgetbeforecreate");
return $("[role='target']", e.target).target();
});
})(jQuery);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<input type="button" data-role="target" value="inp1">
<input type="button" value="inp2">
<div type="button" data-role="target">div1</div>
<div type="button">div2</div>
</body>
</html>
Why does my html page with two 'Mobile' pages inside have to be refreshed or have the little edges moved to show my map in this? See my fiddle or the code below:
I have a mobile page document (html) that has two jQuery Mobile pages.
1. The landing page where you are asked to have your position known.
2. The OpenLayers3 map page which takes your position and centers the map on it when opened.
My trouble is: the map will build and it will center on the position but does not render until after I resize refresh the 'map' edges or the browser window. I suspect it has something to do with page events but am not sure.
Is there a property that I am missing?
Andy
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MobilePg</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css"/>
<script type="text/javascript" src=" http://openlayers.org/en/v3.0.0/build/ol.js"></script>
<style>
#myFooterPosit {
color: gray;
}
</style>
<script>
var x, y;
$(document).ready(function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
});
function showPosition(position) {
var positThing = $('#myFooterPosit');
positThing.text('lat: ' + position.coords.latitude + " : " + " long: " + position.coords.longitude);
x = position.coords.latitude;
y = position.coords.longitude;
}
</script>
</head>
<body>
<script>
$(document).on("pagebeforeshow", "#mapPage", function () {
makeMap();
})
</script>
<!-- Landing page Point of Entry-->
<div data-role="page" id="homePage">
<div data-role="header">
Map
<h1>Mbl Map Input</h1>
Search
</div>
<div data-role="main" class="ui-content">
<p>My Content..</p>
</div>
<div data-role="footer">
<h1><span id="myFooterPosit"></span></h1>
</div>
</div>
<!-- Map Page -->
<script>
function makeMap() {
try {
alert(x + " : " + y);
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
title: 'OSM',
type: 'base',
visible: true,
source: new ol.source.OSM()
})],
view: new ol.View({
center: ol.proj.transform([y, x], 'EPSG:4326', 'EPSG:3857'),
zoom: 14
})
});
} catch (e) {
alert(e.message);
}
}
</script>
<div data-role="page" id="mapPage">
<div data-role="header">
Home
<h1>Map</h1>
</div>
<div data-role="main" class="ui-content">
<div id="map" class="map" style="height:200px;"></div>
</div>
<div data-role="footer">
<h1><span id="myFooterPosit"></h1>
</div>
</div>
</body>
</html
>
You can use the pagecontainer widget's show event:
http://api.jquerymobile.com/pagecontainer/#event-show
Updated FIDDLE
var x, y;
$(document).on("pagecreate","#homePage", function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
});
$(document).on( "pagecontainershow", function( event, ui ) {
if (ui.toPage.prop("id") == "mapPage"){
makeMap();
}
});
function showPosition(position) {
var positThing = $('#myFooterPosit');
positThing.text('lat: ' + position.coords.latitude + " : " + " long: " + position.coords.longitude);
x = position.coords.latitude;
y = position.coords.longitude;
}
function makeMap() {
try {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
title: 'OSM',
type: 'base',
visible: true,
source: new ol.source.OSM()
})],
view: new ol.View({
center: ol.proj.transform([y, x], 'EPSG:4326', 'EPSG:3857'),
zoom: 14
})
});
} catch (e) {
alert(e.message);
}
}
I can't seem to make the "reverse" slide effect while handling the "swiperight" event. So, the code below works fine but I would like when I make the "swiperight" that the next page would slide in from the left side and not right hand side. I did search the documentation and added the reverse: true as as it recomends in to the "swiperight":
$.mobile.changePage("#page"+nextPage, {transition : "slide", reverse:true});
but this does not provide the wanted effect. Can you point out where am I doing it wrong?
I have the following code on jsFiddle:
html:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>First page!</p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
<section id="page2" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>Second page!</p>
</div>
<footer data-role="footer"r><h1>O'Reilly</h1></footer>
</section>
<section id="page3" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>Third page!</p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
</body>
</html>
jQuery:
(function($) {
var methods = {
init : function(options) {
var settings = {
callback: function() {}
};
if ( options ) {
$.extend( settings, options );
}
$(":jqmData(role='page')").each(function() {
$(this).bind("swiperight", function() {
var nextPage = parseInt($(this).attr("id").split("page")[1]) - 1;
if (nextPage === 0)
nextPage = 3;
$.mobile.changePage("#page"+nextPage, "slide");
});
$(this).bind("swipeleft", function() {
var nextPage = parseInt($(this).attr("id").split("page")[1]) +1;
if (nextPage === 4)
nextPage = 1;
$.mobile.changePage("#page"+nextPage, "slide");
});
})
}
}
$.fn.initApp = function(method) {
if ( methods[method] ) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
}
else {
$.error( 'Method ' + method + ' does not exist' );
}
}
})(jQuery);
$(document).ready(function(){
$().initApp();
});
OK first off you're using a Alpha version of jQM and the docs you are referring to a for jQM 1.1.1. I've updated your jsfiddle to use the latest jQM 1.2
http://jsfiddle.net/GYAB7/2/
And I've added the correct syntax for the reverse swipe transition
$.mobile.changePage("#page"+nextPage, {
transition: "slide",
reverse: false
});
});
and the reverse transition
$.mobile.changePage("#page"+nextPage, {
transition: "slide",
reverse: true
});
});
HI
I am using this demo to display a modal dialog
how do I set the width for dialog if i am using it for google street view:
var point = new GLatLng(svlat, svlon);
var panoClient = new GStreetviewClient();
panoClient.getNearestPanoramaLatLng(point, function (newPoint) {
if (newPoint == null) {
alert("no panorama found for this position!!");
return;
}
panoramaOptions = { latlng: newPoint };
myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);
$('#dialogStreetView').dialog("option", "maxWidth", 600);
$('#dialogStreetView').dialog('open');
GEvent.addListener(myPano, "error", handleNoFlash);
});
HTML:
<div id="dialogStreetView" title="Street View Provided by Google... " style="width:300px;height:300px">
<a id="closestreet-view" name="closestreet-view" style="cursor:pointer; text- decoration:underline" >Close</a>
<div name="pano" id="pano" style="width: 300px; height: 300px"></div>
</div>
From the docs:
http://docs.jquery.com/UI/Dialog
this should work:
$("#dialogStreetView").dialog( "option", "width", 460 );
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$("#myDialogBox" ).dialog({
width: 500,
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "blind",
duration: 1000
}
});
$( "#myBoxOpener" ).click(function() {
$( "#myDialogBox" ).dialog( "open" );
});
});
</script>
====== body ======
<div id="myDialogBox" title="My Dialog Box">
<div id="myContentLayer">
<p>My Content</p>
</div>
</div>
<button id="myBoxOpener" class="myButton">Open Dialog Box</button>
jsFiddle Demo
Is it just me does everyone except Porta have a syntax error:
$( "#selector" ).dialog( {
width: 500
} );
took from http://api.jqueryui.com/dialog/#option-width
simply just add width:500
$('#dialogStreetView').dialog( width: 500,"option", "maxWidth", 600);