I've deployed a local openstreetmap tile server and tried many times to show the map using openlayers3, but failed unfortunately.
Here's my experiment scene.
I deploy the tile server on port 80, and get the image correctly via http://127.0.0.1:80/osm_tiles/{z}/{x}/{y}.png. Besides, I place a django web on port 8099, and i can access the web page via http://127.0.0.1:8099/my/page. In the template page, i wrote like this
var layer = new ol.layer.Tile({
source: new ol.source.OSM({
attributions: [
ol.source.OSM.ATTRIBUTION
],
url:'//127.0.0.1:80/osm_tiles2/{z}/{x}/{y}.png'
})
});
var map= new ol.Map({
target : 'map_canvas',
loadTilesWhileAnimating: true,
view: new ol.View({
center:ol.proj.transform([116.391625,39.906813], 'EPSG:4326', 'EPSG:3857'),
zoom : 12
}),
layers:[layer]
});
The map_canvas shows nothing, but i can get the images from tile server in firebug.WHY?
Help me, many thanks!
Try adding crossOrigin: null to the source, like so:
var layer = new ol.layer.Tile({
source: new ol.source.OSM({
attributions: [
ol.source.OSM.ATTRIBUTION
],
url:'//127.0.0.1:80/osm_tiles2/{z}/{x}/{y}.png',
crossOrigin: null
})
});
Related
I'm trying to apply Google Maps API (v3) on my site, which is deployed on Heroku.
The map is populated with a given GPX file, provided by JS/Ajax.
The GPX file is stored on AmazonS3.
( I don't think that it's matter, but note the the site is built with Django, and the GPX file is a FileField of the relevant model ).
It works very well locally (local ip), but the map is not loaded at the deployed site.
I couldn't track any related error on the server logs, e.g. wrong key, etc.
Following is the relevant code snippet:
<div id="map" style="width: 50%; height: 50%;"></div>
<script>
function loadGPXFileIntoGoogleMap(map, filename) {
$.ajax({url: filename,
dataType: "xml",
success: function(data) {
var parser = new GPXParser(data, map);
parser.setTrackColour("#ff0000"); // Set the track line colour
parser.setTrackWidth(5); // Set the track line width
parser.setMinTrackPointDelta(0.001); // Set the minimum distance between track points
parser.centerAndZoom(data);
parser.addTrackpointsToMap(); // Add the trackpoints
parser.addRoutepointsToMap(); // Add the routepoints
parser.addWaypointsToMap(); // Add the waypoints
}
});
}
function initMap() {
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
loadGPXFileIntoGoogleMap(map, "{{ object.gpx_file.url }}");
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=...&callback=initMap"
async defer></script>
Here is the corresponding snapshots:
Following is the console log (Chrome), while on the deployed site:
Can you please assist me with that?
Is that a GoogleMaps API issue? an AmazonS3 issue? Other?
How can I make GoogleMaps work on the deployed site?
Thanks ahead,
Shahar
I am trying to implement navigation in Ionic 2. I have tried with DeepLinking and i got the result, but '#' sign is comming in URL.
When '#' sign will come in URL then Google Analytic will not recognize the website, that's why i have tried to implement navigation in different ways like Angular 2 Routing, that supports both (HTML5 or hash URL style), but unable to implement in Ionic 2.
Ex- http://localhost:8100/#/registration - This one working fine but i want without '#'.
Like http://localhost:8100/registration
Thanks for help
I put in a PR for #ionic/app-scripts 3.2.5 to remedy this:
https://github.com/ionic-team/ionic-app-scripts/pull/1545
In the meantime you can edit some project and dependency files to enable it:
src/app/app.module.ts:
IonicModule.forRoot(MyApp,
{
locationStrategy: 'path'
},
{
links: [
{ component: RegistrationPage, name: 'registration', segment: 'registration' },
{ component: LoginPage, name: 'login', segment: 'login' },
{ component: HomePage, name: 'home', segment: '' }
]
})
src/index.html:
<head>
...
<base href="/" />
...
</head>
node_modules/#ionic/app-scripts/dist/dev-server/http-server.js:
function createHttpServer(config) {
var app = express();
app.set('serveConfig', config);
app.get('/', serveIndex);
app.use('/', express.static(config.wwwDir));
app.use("/" + serve_config_1.LOGGER_DIR, express.static(path.join(__dirname, '..', '..', 'bin'), { maxAge: 31536000 }));
// Lab routes
app.use(serve_config_1.IONIC_LAB_URL + '/static', express.static(path.join(__dirname, '..', '..', 'lab', 'static')));
app.get(serve_config_1.IONIC_LAB_URL, lab_1.LabAppView);
app.get(serve_config_1.IONIC_LAB_URL + '/api/v1/cordova', lab_1.ApiCordovaProject);
app.get(serve_config_1.IONIC_LAB_URL + '/api/v1/app-config', lab_1.ApiPackageJson);
app.get('/cordova.js', servePlatformResource, serveMockCordovaJS);
app.get('/cordova_plugins.js', servePlatformResource);
app.get('/plugins/*', servePlatformResource);
if (config.useProxy) {
setupProxies(app);
}
app.all('/*', serveIndex);
return app;
}
The line app.all('/*', serveIndex); is what will redirect any 404 file or directory not found errors to index.html. The locationStrategy: 'path' setting can then work normally with deeplinks and redirects under these circumstances.
Try to use pathLocationStrategy instead of HashLocationStrategy.
Add this in app.module.ts
import { LocationStrategy,
PathLocationStrategy } from '#angular/common';
...
#NgModule({
...
providers: [
{
provide: LocationStrategy,
useClass: PathLocationStrategy
},
...
Or other way is
IonicModule.forRoot(MyApp, {
locationStrategy: 'path'
})
And make sure to have a valid base href.
So here is the list of things which I did. Hope this helps.
We need to remove # in path of every url because Google Analytics rejects the urls with # in them. In App Module , add {locationStrategy: 'path'} to your App Module as follows :
IonicModule.forRoot(MyApp, {
locationStrategy: 'path'
})
2 .Now # is removed from the url. But when you refresh or directly access the url, this wont work because this is expected behaviour for any SPA. When you refresh the page , server tried to find the page at the location mentioned. As stated by #Parth Ghiya above For eg: if you hit localhost/abc , then server tries to find abc/index.html which actually doesn't exist.So to resolve this , you have wrote configurations on my server i.e to point every request to index.html . I am using node express server to deploy the app. Use the following code to route every request to index.html -
var express = require('express');
var path = require('path')
var app = express();
app.use(express.static(path.resolve(__dirname, "www")));
app.use('/*', function(req, res){
res.sendFile(__dirname+ '/www' + '/index.html');
});
app.set('port', process.env.PORT || 3000);
app.listen(app.get('port'), function() {
console.log("listening to Port", app.get("port"));
});
I'm creating an app with some custom gauges using Rally SDK 2.0. This requires some custom HTML. I took a rake-compiled app.html file from the examples as a starting point. Using JustGage for my gauges. Here is my launch function.
launch: function () {
var info = this.getStoriesForProject(); //Gets some aggregate info
$('#header label').html(info.Title);
var g = new JustGage({
id: "devgauge",
value: info.DevPercent,
levelColors: ['#f80404', '#f8f804', '#50ed0e'],
min: 0,
max: 100,
title: "Dev %"
});
this.add('foo');
},
Then I added some custom HTML in app.html.
Now, if i run this without the code "this.add('foo')", the app adds a new div in the body with class="x-container" and puts my custom HTML outside that div effectively hiding it.
If i use the "this.add('foo') it does NOT create the div class=x-container and it shows my widget just fine.
What is the PROPER way to accomplish what I'm attempting using the 2.0 sdk? I realize the add method is for adding Ext components, but somehow calling this is causing my HTML to render ok. Looking at some apps we developed in the old SDK, using the custom HTML worked just fine in those.
Ext likes to know what is going on layout-wise and often gets confused if you're manually manipulating the dom beneath it without its knowledge. Usually if we have some known set of initial layout we add those via the items collection on the app:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
itemId: 'header'
},
{
xtype: 'container',
itemId: 'devguage'
}
]
});
Then inside of launch you can add content to those like so:
this.down('#devguage').add({
//some other component
});
You can always just drop all the way down to the element level though as well:
this.down('#header').getEl().dom //the raw html element
By default apps use an auto layout, so any items should flow as you would expect with normal html.
Or, instead of using itemId, you can set the id of the container's element using its id property:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
id: 'header'
},
{
xtype: 'container',
id: 'devguage'
}
]
});
The resulting html elements will use those ids, which allows you to target them directly with your own custom rendering.
I'm a newbie to all the Sencha Touch stuff, but until now I'm very enthousiastic about it's capabilities. There is one problem, i somehow can't solve.
I would like to use a Tpl (XTemplate) for a calender view. The idea is to create a div element for every appointment, which i can place within containers to layout them. Somehow i can't get the dataview to work.
I've stripped down my code to the bare minimum: a panel containing a DataView. When i use the itemTpl, everything works fine. But when I use the tpl (with or without the XTemplate) i don't see anything. I checked if it was just a display malfunction (searched for the XXX from the template), but that's not the case.
This is my code:
Ext.define('InfoApp.view.CalendarDay', {
extend: 'Ext.Panel',
xtype: 'calendarday',
requires: [ 'InfoApp.store.sAppointments'],
config: {
title: 'Dag',
layout: 'fit',
items: [
{
xtype: 'dataview',
store: 'appointmentStore',
//itemTpl: [ 'XXX {day} {course}' ] --> Works
tpl: new Ext.XTemplate('<tpl for=".">XXX {day} {course}</tpl>')--> Doesn't Work...
}
]
}
});
Thanks in advance for any suggestions or improvements!
Assuming ST2 and not ST1
From http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-tpl and the comments on the tpl: config in the docs, it appears there's a bug when using a remote store. Even if your store has data it. tpl: apparently only works right now if your data is hardcoded in data:[]
you can use itemTpl: new XTemplate(), or itemTpl: XTemplate.from('someid') or you can defer specifying until afterwards, grab your dataview and go dv.setItemTpl(new XTemplate()), etc.
Tanks #brink for your answer.
It took me a couple of days, but this worked for me:
// Load the store
var store = Ext.getStore('appointmentStore');
// Get the current range of the store
var data = store.getRange();
// Create a custom template
var tpl = new Ext.XTemplate(<tpl for=".">{day} {course}</tpl>);
// Loop through the data array
var showData = array();
for(var i=0;i<data.length;i++){
showData.push(data[i].data);
}
// Get the panel by ID and push the html template
var panel = Ext.getCmp('appointmentspanel');
panel.updateHtml(tpl.applyTemplate(showData));
Assuming that I have followed the Sencha Touch 2 Getting Started tutorial, and have a list populated by JsonP proxy data- how do I go about making cached data appear if the user is offline? Currently, the list is simply not displayed if there is no internet connection.
In the video tutorial, Ed briefly mentions that this can "easily be done" but did not provide a reference to where I might find this in the Sencha documentation.
Below is an example of my store object:
Ext.define('test.store.NewsListStore', {
extend : 'Ext.data.Store',
requires: ['test.model.NewsListModel', 'Ext.data.Request'],
config : {
model : 'test.model.NewsListModel',
storeId : 'news-list-store',
autoLoad: true,
proxy: {
type: 'jsonp',
url : 'http://example.com/jsonp',
config : {
noCache: false
}
},
grouper : {
groupFn : function(record) {
var unix_timestamp = parseInt(record.get("entry_date"));
var date = new Date( unix_timestamp*1000 );
return Ext.Date.format(date, 'F');
}
},
}
});
Have a look at this tutorial about taking a Sencha Touch app offline - it's not Sencha Touch 2 but it might point you in the right direction
Here is an example you can follow with localstorage:
http://www.robertkehoe.com/2012/11/sencha-touch-2-localstorage-example/
It uses Sencha Touch 2