<!DOCTYPE html>
<html lang="en">
<head>
<title>Selection control - Azure Maps Web SDK Samples</title>
<!-- 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>
<!-- Add references to the Azure Maps Map Drawing Tools JavaScript and CSS files. -->
<link
rel="stylesheet"
href="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.css"
type="text/css"
/>
<script src="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.js"></script>
<!-- Add references to the Azure Maps Selection Control module JavaScript and CSS files. -->
<link rel="stylesheet" href="./selectionControl.min.css" type="text/css" />
<script src="./selectionControl.min.js"></script>
<script type="text/javascript">
var map, datasource;
//GeoJSON feed that contains the data we want to map.
var geojsonFeed =
"https://azuremapscodesamples.azurewebsites.net/Common/data/geojson/SamplePoiDataSet.json";
function GetMap() {
//Initialize a map instance.
map = new atlas.Map("myMap", {
center: [-73.929, 40.7406],
zoom: 10,
style: "grayscale_light",
view: "Auto",
authOptions: {
authType: "subscriptionKey",
subscriptionKey: "",
},
});
//Wait until the map resources are ready.
map.events.add("ready", function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
datasource.importDataFromUrl(geojsonFeed);
//Create a layer to render the points.
map.layers.add(
new atlas.layer.BubbleLayer(datasource, null, {
color: [
"case",
//If there is a color property, use it.
["has", "color"],
["get", "color"],
//default to blue.
"#3399ff",
],
})
);
var control = new atlas.control.SelectionControl({
style: "auto",
// selectionModes: ['circle', 'time']
source: datasource,
});
map.events.add("dataselected", control, function (selectedShapes) {
console.log(selectedShapes); // printing the selectedShapes
alert(selectedShapes.length + " shapes selected");
});
//Add controls to the map.
map.controls.add(
[
//Optional. Add the map style control so we can see how the custom control reacts.
new atlas.control.StyleControl({
style: "auto",
persistSearchArea: true,
}),
//Add the selection control to the map.
control,
],
{
position: "top-left",
}
);
});
}
</script>
</head>
<body onload="GetMap()">
<div
id="myMap"
style="position: relative; width: 100%; min-width: 290px; height: 600px"
></div>
<fieldset
style="width: calc(100% - 30px); min-width: 290px; margin-top: 10px"
>
<legend><h1 style="font-size: 16px">Selection control</h1></legend>
This sample shows how to use the selection control. This control connects
to a data source and lets you draw polygon areas on the map and retrieve
all the point shapes in the data source that are within that area. Press
the pointer button in the top right corner of the map to choose a
selection mode, then draw on the map. This samples uses the open source
<a
href="https://github.com/Azure-Samples/azure-maps-selection-control/"
target="_blank"
>Azure Maps Selection Control module</a
>
</fieldset>
</body>
</html>
I'm using the azure maps selection module to filter out a data points based on selection. But console.log (selectedShapes) on "dataselected" event returns a array with undefined values. However the alert shows the number of elements in the array. But they are all undefined. Is there anything that I'm missing ? Thanks.
Related
I am instantiating a leaflet map, but the tiles are basically being scattered all over the page - while the map is within a div, most of the tiles are not respecting that boundary:
<div class="widget-content listing-search-map-widget-content">
<div class="ih-map"
id="Map_5333811_16"
style="height:450px;"
data-centerpoint="38.573955 -121.442478"
data-mousewheel="true"
data-maptype="TERRAIN"
data-zoom="8"
>
</div>
</div>
The javascript comes down to:
mapOptions = {
attributionControl: true,
center: {
lat: 38.573955
lng: -121.442478
},
centerpoint: "38.573955,-121.442478",
layers: {},
maptype: "Terrain",
scrollWheelZoom: false,
zoom: 8
}
var map = L.map( "Map_5333811_16", mapOptions );
What would cause the tiles to plot all over the place?a couple of tiles are within the bounds of the div, but not the rest of them. You can see a screenshot of what happens here:
This sounds like a symptom of missing Leaflet CSS file, or incorrect version of that file.
As has been pointed out, this is solved by importing the CSS files.
Classically, you include the link to your CSS stylesheet in the head section of your document:
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
Or, in my case, stumbling across this problem while adapting Vue CLI's Webpack template, by adding
import "leaflet/dist/leaflet.css";
into the main.js file.
The key lines of CSS appear to be these:
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
so knowing that you can insert them at whatever point in your project suits your style.
add these to your index.html
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
Using the polymer paper-swatch-picker, I'm trying to change an icon but it is not getting updated.
In the below there is the CSS code which I have used to change icon. Is it correct?
HTML:
<paper-swatch-picker class="fancy"></paper-swatch-picker>
CSS:
paper-swatch-picker.fancy {
--paper-swatch-picker-color-size: 10px; -- works
--paper-swatch-picker-icon-size: 40px; -- works
--paper-swatch-picker-icon: {
'icon':'menu' -- not works(icon not getting changed)
}
}
You can use the attributes icon to change it instead of CSS. But you need to import the iron-icons/iron-icons.html first, according to the set you use. In this case, you are using menu icon, which belongs to the default set iron-icons.html. For example, maps:...something will belong to iron-icons/maps-icons.html
<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-swatch-picker/v2.2.0/paper-swatch-picker/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-swatch-picker.html">
<link rel="import" href="../neon-animation/web-animations.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<style>
paper-swatch-picker {
margin: 0 10px;
}
</style>
<!-- Customized color swatch -->
<paper-swatch-picker icon="menu" color="#E91E63"></paper-swatch-picker>
I have also written an article featuring the top color picker web components, including paper-swatch-picker as well. Here's the link if you want to read.
Im using AngularJS 1.5x
I have a Web Form to submit Car information 1)model, 2)make to Backend(Api: SaveCarDetails).to save this form information in the Backend DB.
On success, I have to make a API call(GetCarsInfo) to get the array list of cars information(so far saved in the BE).
I need to display car information Cards showing the make & model and with EDIT button so that user can update exactly that particular car information and we use (SaveCarDetails same API as used for adding new details).
On the succesfull update, I need to again make to call to (GetBanks) to get the updated list of bank account information.
Now I need to show Tickmark Icon ONLY on the Car info card that has been updated or newly added.
What is the best way to do this? (show the icon only on the card that got updated or newly added).
How to find out exactly which card is updated by comparing or watching an Object? there is no unique identifier that is being passed for any updates to the response object.
I tried to do an $watch on the object but I couldn't get it to work.
Here is the code: http://plnkr.co/edit/RztTjy?p=preview
// Code goes here
angular.module('app', [])
.controller('MyCtrl', function($scope) {
var vm = this;
vm.carobj = [{
'make': 'acura',
'model': "TL",
'name':'joe'
},
{
'make': "bmw",
'model': '5series',
'name':'doe'
}];
console.log(vm.carobj);
});
/* Styles go here */
.card{
border: 10px solid #cccccc;
width: 200px;
height:160px;
margin:20px;
position:relative;
}
.tickWhenUpdated{
float:right;
position:absolute;
right:0;
bottom:0;
}
.editbtn{
width:100px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="font-awesome#4.3.0" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script data-require="angularjs#1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<h1>Hello Plunker!</h1>
<div ng-controller="MyCtrl as mc">
<div class="card" ng-repeat="car in mc.carobj">
<p>Car Info Box </p>
<i class="fa fa-check tickWhenUpdated" aria-hidden="true"></i>
Account num:{{car.make}} <br />
Routung num: {{car.model}} <br />
<input value="edit" class="btn btn-primary editbtn" type="button" />
</div>
</div>
</body>
</html>
First of all, instead of dynamically updating the class using ng-class or something, you could just set a variable on the car objects called updated that is truthy when the car was updated. Then place ng-show="car.updated" on the tag.
Regarding how to set that updated variable on the object, you can either try to manipulate it directly when you click the edit button. Just pass the element to a function which will modify the updated field. Something like;
Html:
<div ng-repeat="car in cars">
<input type="button" ng-click"update(cars, car.id)">
</div>
Js:
$scope.update = function(cars, id) {
cars = cars.map(function(car) {
if (car.id == id) {
car.updated = true
} else {
car.updated = false
}
})
}
If you absolutely don't have an ID, the only thing I can think of is to put something that increments on the object (unix timestamp, incrementor). Something like
Js:
$scope.itr = 0;
$scope.update = function(car) {
$scope.itr++
car.itr = $scope.itr
}
Then have an ngChange on the array that calls a function and sets car.updated to false on all objects except the one with the largest itr value, which it sets to true.
This is a hardcore hack, and I would really try to just have some sort of unique ID.
Given the code below which I copy-pasted from Google Charts, (I've just removed the html, head and body tags). This code performs really well if I simply add it inside my index.html page, the bar chart is displayed nicely.
However, if I insert this code as an html partial called by the ng-view and routeProvider mechanism, the charts are not displayed at all, and the console throws no error.
Do you know what I should check ?
<div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</div>
I use angularjs 1.2 rc2.
The reason is because inline javascript written in template is not parsed inside ng-view. It's a strange behaviour and only solution that I know is even more strange. Include normal jquery script before including angular.js and... now <script> tag gets parsed. Magic.
If someone know a solid explanation of that fact, I'm all ears.
I have built a responsive website with media queries to target different mobile devices but would like to have an "override all" link available on smaller devices. When clicked, the link would remove all media query styles and reset the page to default styles, exposing the site as it would at 1024px wide. Is there a way to achieve this?
The only way you can do this is with Javascript. I came up with two solutions:
id/class on <html> element:
Apply an id or class to the html element: <html class="media-queries">.
In your media-queries, every selector will start with .media-queries:
CSS
#media (max-width: 300px) {
.media-queries #nav li {
display: block;
}
.media-queries #main, .media-queries #aside {
float: none;
}
}
Then, you get JS to remove class="media-queries".
HTML
<a id="del-mq" href="#">Default style</a>
JavaScript
var delMQ = document.getElementById('del-mq');
delMQ.onclick = function() {
document.getElementsByTagName('html')[0].removeAttribute('class');
}
jQuery
$('#del-mq').click(function() {
$('.media-queries').removeClass();
});
Pros: no extra http requests.
Cons: lots of css selectors(.media-queries), which shouldn't be a problem if using Sass:
#media (max-width: 300px) {
.media-queries {
#nav...
#main...
}
}
External media-queries.css
All the media queries go in a separate css file. Include it with <link rel="stylesheet" href="media-queries.css">.
Then you get an ID for the <link> and remove the element.
HTML
<head>
<link rel="stylesheet" href="default.css">
<link id="media-queries" rel="stylesheet" href="media-queries.css">
</head>
<body>
...
<a id="del-mq" href="#">Default style</a>
...
</body>
Javascript
var delMQ = document.getElementById('del-mq');
delMQ.onclick = function() {
document.getElementsByTagName('head')[0].removeChild(document.getElementById('media-queries'));
}
jQuery
$('#del-mq').click(function() {
$('#media-queries').remove();
});
Pros: no need for lots of css selectors.
Cons: extra http request.