There is no built-in option for a 'green-marker' in the image property of the IconOptions.
How do I go about implementing one?
https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.iconoptions?view=azure-maps-typescript-latest
You will have to add an image to the map image sprite. There are templates for all the built in icons and more as shown here: https://azuremapscodesamples.azurewebsites.net/?sample=All%20built-in%20icon%20templates%20as%20symbols
You can load a template into the map and display it in a symbol layer as shown in this sample: https://azuremapscodesamples.azurewebsites.net/?sample=Symbol%20layer%20with%20built-in%20icon%20template
Here is sample that uses the "marker" icon template, and gives it a green color.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Symbol layer with built-in icon template - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico"/>
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<script type='text/javascript'>
var map, datasource;
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source to add your data to.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add a point to the center of the map.
datasource.add(new atlas.data.Point([0, 0]));
//Create an icon from one of the built-in templates and use it with a symbol layer.
map.imageSprite.createFromTemplate('myTemplatedIcon', 'marker', 'green', '#fff').then(function () {
//Add a symbol layer that uses the custom created icon.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
image: 'myTemplatedIcon'
}
}));
});
});
}
</script>
</head>
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;height:600px;"></div>
</body>
</html>
Related
I have an EXTJS6.5 application. I want to use variables in my index.html that come from a properties file. However the change of the values of these variables should not require a new build of the application. This means that the variable can be changed if required (Without the need to build the extjs code).
Can someone please help with this?
I have already gone thru other threads where index.html can have placeholders, but do not seem to have a concrete example.
This is my properties file (Runtime.js)
{
"appUrl": "http://myappurl.com",
"appId": "10"
}
Then I want to use these variables in my index.html as such:
This is my index.html
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<meta name="description" content="MyApp">
<title>MyApp</title>
<link rel="icon" type="image/png" href="myicon.png">
<link rel="stylesheet" href="resources/dist/myapp-resources.min.css">
</head>
<body>
<div id="myapp-app-loading">
<div class="myapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<script type="text/javascript">
var Ext = Ext || {};
Ext.beforeLoad = function (tags) {
Ext.manifest = 'classic'; // this name must match a build profile name
};
</script>
<script src="Runtime.js"></script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="6d7f3123-ffca-44d3-8ed2-14fr2w6be804" type="text/javascript" src="bootstrap.js"></script>
<script src="{{Runtime.appUrl}}/configuration/MyConstants.js"></script>
<script src="{{Runtime.appUrl}}/resources/mycharts/mycharts.js"></script>
<script src="{{Runtime.appUrl}}/resources/ckeditor/ckeditor.js"></script>
</body>
</html>
Will this work this way? Or pls suggest any better way to do this..thank you very much.
Given Runtime.js file has a syntax error. Is not valid javascript file.
Runtime.js should be:
window.appUrl="http://myappurl.com";
window.appId="10";
And you can use these variables like window.appUrl/window.appid in script block, not in html block.
You can do workaround to resolve the problem: You can generate includes from Runtime.js.
Example:
index.html
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<meta name="description" content="MyApp">
<title>MyApp</title>
<link rel="icon" type="image/png" href="myicon.png">
<link rel="stylesheet" href="resources/dist/myapp-resources.min.css">
</head>
<body>
<div id="myapp-app-loading">
<div class="myapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<script type="text/javascript">
var Ext = Ext || {};
Ext.beforeLoad = function (tags) {
Ext.manifest = 'classic'; // this name must match a build profile name
};
</script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="6d7f3123-ffca-44d3-8ed2-14fr2w6be804" type="text/javascript" src="bootstrap.js"></script>
<script src="Runtime.js"></script>
</body>
</html>
Runtime.js
window.appUrl="http://myappurl.com";
window.appId="10";
var script = document.createElement("script")
script.type = "text/javascript";
script.src = window.appUrl+"/configuration/MyConstants.js";
var script2 = document.createElement("script")
script2.type = "text/javascript";
script2.src = window.appUrl+"/resources/mycharts/mycharts.js";
var script3 = document.createElement("script")
script3.type = "text/javascript";
script3.src = window.appUrl+"/resources/ckeditor/ckeditor.js";
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script);
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script2);
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script3);
Updated 2019-07-17:
If you want to require script before application launches you must add reference to script in app.json in js block (Which can't be done because you want to personalize the source of scripts).
Second option is change in app.js you can do Ext.Loader.loadScript like:
Ext.Loader.loadScript({
url: 'my.js',
onLoad: function(){
Ext.application({
name: 'Fiddle',
extend: 'Fiddle.Application',
autoCreateViewPort: false
});
},
onError: function(){
console.log('error');
}
});`
I've created a server-side react app, where it would return html as shown below:
const html = renderToString(<App />);
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>A Cool Page</title>
<link rel="stylesheet" href="${ROOT}/static/index.css">
</head>
<body>
<div id="root">${html}</div>
<script src="${ROOT}/client-bundle.js"></script>
</body>
</html>
I read a lot of people have been using react-helmet to manage the content in head. I'm wondering what's the benefit of using it, when I can just directly include as shown above.
A major benefit of react-helmet is when you have multiple components in a tree with <head> tags, and you have <meta> tags with the same attributes/values.
For instance, if on your index page component you have:
const html = renderToString(<App />);
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="This is the index page description">
<title>A Cool Index Page</title>
</head>
</html>
But then on a leaf page component, you also have a <head> tag containing meta tags:
<html>
<head>
<meta name="description" name="This is the unique leaf page description">
<title>A Cool Leaf Page</title>
<link rel="stylesheet" href="${ROOT}/static/index.css">
</head>
</html>
Notice between our two page components there are two meta tags with the same attribute value name="description" in our tree. You might think this could lead to duplication, but react-helmet takes care of this problem.
If someone ends up on the leaf page, react-helmet overrides the index/site-level description meta tag and renders the lower-level one, the one specifically for the leaf page.
It will also contain the viewport meta tag, since it did not have to be overwritten.
Because of react-helmet, on the leaf page, the <head> would appear as follows:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" name="This is the unique leaf page description">
<title>A Cool Leaf Page</title>
<link rel="stylesheet" href="${ROOT}/static/index.css">
</head>
</html>
react-helmet allows to set meta tags that will be read by search engines and social media crawlers. This makes server-side rendering and React Helmet a dynamic duo for creating apps that are SEO and social media friendly.
eg:
import { Helmet } from 'react-helmet';
<Helmet>
<title>Turbo Todo</title>
<meta name="description" content="test on react-helmet" />
<meta name="theme-color" content="#ccc" />
</Helmet>
Both methods should work. But with react-helmet, the head is also treated as a component and is more react-like. Also, although it's unusual, you may bind some props or states with the meta-data to implement a dynamic head. One scenario is switching between different languages.
React Helmet also allow you to modify classes outside the scope of your render function.
For example, if you want to modify your <body> tag dynamically, you could do the following:
<Helmet>
<body className="dynamic-class-for-body-on-this-view" />
</Helmet>
React Helmet is a reusable React component that will manage all of your changes to the document head.
For example, if you want to change the title and meta description of every page according to your SEO, you could do the following:
<Helmet>
<title>Your Title</title>
<meta name="description" content="Description of your page" />
</Helmet>
I specifically use Helmet for meta tags and to also change the style of a 3rd party component that isn't editable.
<Helmet>
<script type="text/javascript">
{`
window.addEventListener('load', function () {
document.querySelectorAll('.noEditStars > span').forEach(span => {
span.style.cursor = 'pointer';
});
}, false);
`}
</script>
</Helmet>
I've created my first extjs program using sencha called test and it has an index.html as the main page. I think there should be a way to initialize the app there's no mention of extjs script in index.html
<!DOCTYPE HTML>
<html manifest="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<title>Test</title>
<script type="text/javascript">
var Ext = Ext || {}; // Ext namespace won't be defined yet...
// This function is called by the Microloader after it has performed basic
// device detection. The results are provided in the "tags" object. You can
// use these tags here or even add custom tags. These can be used by platform
// filters in your manifest or by platformConfig expressions in your app.
//
Ext.beforeLoad = function (tags) {
...
//};
};
</script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="c0c58612-ec0d-4d6c-99a1-92decf199a29" type="text/javascript" src="bootstrap.js"></script>
</head>
<body></body>
</html>
To run a sencha app with extjs use sencha app watch
I've set up an angular project using Yeoman, and embedding a google map in a page using ngmap, using a given address to centre it. I'm adding a marker to the map using the google geocode service to get the latitude/longitude for the address, once the map has been initialised.
var vm = this;
vm.address = '1600 Pennsylvania Ave NW, Washington, DC 20500, United States';
NgMap.getMap().then(function() {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
address: vm.address
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
vm.markerPosition = '[' + results[0].geometry.location.lat() + ', ' + results[0].geometry.location.lng() + ']';
} else {
console.log("Unable to retrive details for address: " + address);
}
});
});
It's working fine, I've a plunkr running here - https://plnkr.co/Ex91VGqdFmL9FP78uzU0?p=preview - but when I run the build using gulp build I get this error, and the same when I run the unit tests:
'google' is not defined
What do I need to inject, or mock, so that the call to google.maps.Geocoder doesn't fail?
As requested, this is the index.html from the build
<!doctype html>
<html ng-app="myApp">
<head>
<base href="/">
<meta charset="utf-8">
<title translate>title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/png" href="images/icon.png">
<link rel="stylesheet" href="styles/vendor-d41d8cd98f.css">
<link rel="stylesheet" href="styles/app-2dd2bcbbbd.css">
<script src="https://maps.google.com/maps/api/js"></script>
</head>
<body>
<main ui-view></main>
</body>
<script src="scripts/vendor-83b6c91f4a.js"></script>
<script src="scripts/app-41321c4301.js"></script>
</html>
Read through some of the examples of ngMap and it turns out the marker directive can take an address as a parameter, which it converts to lat/lon values automatically.
So the solution is to remove all the google.maps.Geocoder and just this in the html.
<marker position="{{myMapCtrl.address}}" title="Marker"></marker>
and to learn to read all the documentation before attempting to use a library
I want to use map tiles offline. The tiles are made with Maperitive. This is the HTML with leaflet JS:
<!DOCTYPE HTML>
<html>
<head>
<title>map - test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- leafletjs -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map">
<script>
var map = L.map('map', {
maxZoom: 18,
minZoom: 16,
maxBounds: [
//south west
[47.918760313911896, 9.25198432059355],
//north east
[47.929235549307315, 9.26072925925386]
],
}).setView([47.923997931609605, 9.2563567899237054], 17);
L.tileLayer('../img/tiles/{z}/{x}/{y}.png', {
tms: true // Do I need that?
}) .addTo(map);
L.marker([47.92458, 9.25630]) .addTo(map);
</script>
</div>
</body>
</html>
The code works offline on my computer but non online on my server. The folder with the tiles is stored on the server. The path to the tiles is correct.
What is my fault?
I found the reason.
It´s not the code. The tile-PNGs caused a 403 error. I rendered the tiles with Maperitive on a Windows 8 computer. Then I transferred them to a Mac. From there I put them on the server via ftp.
Now I transferred the tiles directly from the Windows to the server. And all is ok.
What happens between the Windows and the Mac that corruptes the PNGs?