The icons show up but the Select dropdown menu is not working...
The select menu is supposed to do a query and the resulting map is supposed to be styled with marker icons.
<!DOCTYPE html>
<html>
<head>
<style>
#visualization {
height: 660px;
width: 900px;
}
#legend {
background: lightsteelblue;
padding: 10px;
margin: 5px;
font-size: 10px;
font-family: Arial, sans-serif;
border: 1px black;
}
</style>
<link href="/apis/fusiontables/docs/samples/style/defult.css"
rel="stylesheet"type="text/css">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(33.56,-112),
zoom: 10,
zoomControl: true,
zoomControlOptions: {
position:google.maps.ControlPosition.RIGHT_TOP
},
panControl: true,
panControlOptions: {
position:google.maps.ControlPosition.RIGHT_TOP
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: "col7",
from: "1sOUTP43jvD5rEOR6nL-ft0mikP234DWGSyTARzc"
},
styles: [
{where: "'Type'='Boarding'",markerOptions: {iconName: "stable"}},
{where: "'Type'='Grooming'",markerOptions: {iconName: "salon"}},
{where: "'Type'='Hospitals'",markerOptions: {iconName: "hospitals"}},
{where: "'Type'='Shelters'",markerOptions: {iconName: "museum"}},
{where: "'Type'='Stores'",markerOptions: {iconName: "shopping"}},
],
map:map,
});
function changeMap() {
var whereClause;
var searchString =
document.getElementById('search-string').value.replace(/'/g, "\\'");
if (searchString != '--Select--')
{whereClause = "'Type' = '" + searchString + "'";}
layer.setOptions({
query:
{select: "col7",
from: "1sOUTP43jvD5rEOR6nL-ft0mikP234DWGSyTARzc",
where: whereClause}
});
}
// Create the legend and display on the map
var legend = document.createElement('div');
legend.id = 'legend';
var content = [];
content.push('<h3>Icons:</h3>');
content.push('<p><img src="http://www.public.asu.edu/~ajusic1/boarding1.png"
width="24"height="25">Boarding</p>');
content.push('<p><img src="http://www.public.asu.edu/~ajusic1/grooming1.png"
width="24"height="25">Grooming</p>');
content.push('<p><img src="http://www.public.asu.edu/~ajusic1/hospitals1.png"
width="24"height="25">Hospitals</p>');
content.push('<p><img src="http://www.public.asu.edu/~ajusic1/shelters1.png"
width="24"height="25">Shelters</p>');
content.push('<p><img src="http://www.public.asu.edu/~ajusic1/shopping1.png"
width="24"height="25">Stores</p>');
legend.innerHTML = content.join('');
legend.index = 1;
map.controls[google.maps.ControlPosition.LEFT_CENTER].push(legend);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div>
<label class="layer-wizard-search-label">
<b><label>SERVICES:</label></b>
<select id="search-string" onchange="changeMap(this.value);">
<option value="--Select--">--Select--</option>
<option value="Boarding">Boarding</option>
<option value="Grooming">Grooming</option>
<option value="Hospitals">Hospitals</option>
<option value="Stores">Stores</option>
<option value="Shelters">Shelters</option>
</select>
</label>
</div>
<div id="map-canvas" style="background-color:#EEEEEE;height:660px;
width:80%;float:left;">
Content goes here
</div>
</body>
</html>
I get this javascript error:
Timestamp: 07/30/2013 04:54:33 PM
Error: changeMap is not defined
Source File: http://www.public.asu.edu/~ajusic1/EX3.html
Line: 1
Your map, layer and changeMap functions are local to the initialize function. HTML click and change events run in the global context.
This works for me locally:
<!DOCTYPE html>
<html>
<head>
<style>
#visualization {
height: 660px;
width: 900px;
}
#legend {
background: lightsteelblue;
padding: 10px;
margin: 5px;
font-size: 10px;
font-family: Arial, sans-serif;
border: 1px black;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map = null;
var layer = null;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(33.56,-112),
zoom: 10,
zoomControl: true,
zoomControlOptions: {
position:google.maps.ControlPosition.RIGHT_TOP
},
panControl: true,
panControlOptions: {
position:google.maps.ControlPosition.RIGHT_TOP
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
layer = new google.maps.FusionTablesLayer({
query: {
select: "col7",
from: "1sOUTP43jvD5rEOR6nL-ft0mikP234DWGSyTARzc"
},
styles: [
{where: "'Type'='Boarding'",markerOptions: {iconName: "stable"}},
{where: "'Type'='Grooming'",markerOptions: {iconName: "salon"}},
{where: "'Type'='Hospitals'",markerOptions: {iconName: "hospitals"}},
{where: "'Type'='Shelters'",markerOptions: {iconName: "museum"}},
{where: "'Type'='Stores'",markerOptions: {iconName: "shopping"}},
],
map:map,
});
// Create the legend and display on the map
var legend = document.createElement('div');
legend.id = 'legend';
var content = [];
content.push('<h3>Icons:</h3>');
content.push('<p><img src="http://www.public.asu.edu/~ajusic1/boarding1.png" width="24" height="25">Boarding</p>');
content.push('<p><img src="http://www.public.asu.edu/~ajusic1/grooming1.png" width="24" height="25">Grooming</p>');
content.push('<p><img src="http://www.public.asu.edu/~ajusic1/hospitals1.png" width="24" height="25">Hospitals</p>');
content.push('<p><img src="http://www.public.asu.edu/~ajusic1/shelters1.png" width="24" height="25">Shelters</p>');
content.push('<p><img src="http://www.public.asu.edu/~ajusic1/shopping1.png" width="24" height="25">Stores</p>');
legend.innerHTML = content.join('');
legend.index = 1;
map.controls[google.maps.ControlPosition.LEFT_CENTER].push(legend);
}
function changeMap() {
var whereClause;
var searchString =
document.getElementById('search-string').value.replace(/'/g, "\\'");
if (searchString != '--Select--')
{whereClause = "'Type' = '" + searchString + "'";}
layer.setOptions({
query:
{select: "col7",
from: "1sOUTP43jvD5rEOR6nL-ft0mikP234DWGSyTARzc",
where: whereClause}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div>
<label class="layer-wizard-search-label">
<b><label>SERVICES:</label></b>
<select id="search-string" onchange="changeMap(this.value);">
<option value="--Select--">--Select--</option>
<option value="Boarding">Boarding</option>
<option value="Grooming">Grooming</option>
<option value="Hospitals">Hospitals</option>
<option value="Stores">Stores</option>
<option value="Shelters">Shelters</option>
</select>
</label>
</div>
<div id="map-canvas" style="background-color:#EEEEEE;height:660px;
width:600px;">
Content goes here
</div>
</body>
</html>
working example
Related
I have a Leaflet-map with a layer containing markers with popups using bindPopup. I written this function that flies to the next marker onclick:
const makeFlyTo = () => {
const button = document.getElementById("next");
L.DomEvent.on(button, "click", function(e) {
if (currentView === data.length) {
currentView = 0;
}
map.flyTo(
[data[currentView].lat, data[currentView].lng],
{ zoom },
{
animate: true,
duration: 3
}
);
currentView++;
});
};
I would be nice if the popup opened up on "arrival". Any idea how this can be done?
We have to open marker first and they use FlyTo.
marker.openPopup();
map.flyTo([value['lat'], value['lng']], 15);
As mentioned in the comments, If we use flyTo and then open Popup then most of the times the view adjustment made by popup in map is incorrect.
map.panTo([value['lat'], value['lng']], 15).on('zoomend', () => { setTimeout(()=>marker.openPopup(), 3000) })
OR
map.panTo([value['lat'], value['lng']], 15).on('zoomend', () => marker.openPopup())
Example -
var map = L.map("map").setView([46.76336, -71.32453], 16);
var OpenStreetMap_Mapnik = L.tileLayer(
"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
maxZoom: 19,
attribution:
'© OpenStreetMap'
}
).addTo(map);
function addRowTable(marker, code, coords) {
var tr = document.createElement("tr");
var td = document.createElement("td");
td.textContent = code;
tr.appendChild(td);
tr.onclick = () => {
marker.openPopup();
map.flyTo([value['lat'], value['lng']], 15);
};
document.getElementById("t_points").appendChild(tr);
}
function addMarker(code, lat, lng) {
var marker = L.marker([lat, lng]);
marker.title = code;
marker.bindPopup(code);
marker.addTo(map);
addRowTable(marker, code, [lat, lng]);
}
$(document).ready(function () {
var points = [
["M02KM262", 46.76336, -71.32453],
["M10KM052", 46.76186, -71.32247],
["83KM081", 46.76489, -71.32664],
["83KM082", 46.76672, -71.32919]
];
for (var i = 0; i < points.length; i++) {
addMarker(points[i][0], points[i][1], points[i][2]);
}
});
html, body, .full, #map{
margin: 0;
padding:0;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" rel="stylesheet"/>
<div class="row full">
<div class="col col-sm-3 full" style="overflow: auto;">
<h3 >List</h3>
<table class="table table-bordered">
<thead>
<tr>
<th>Codes</th>
</tr>
</thead>
<tbody id="t_points"></tbody>
</table>
</div>
<div id="map" class="col col-sm-9 full"></div>
</div>
Hi I have Date picker on select Date Month & Year it will show all Date in that Moth it working Fine
Now I want to add a Slider On that so that i used Owl Curasol after adding Curasol Date picker Stopped Working.
My Full code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/owl-carousel/owl.carousel.css">
<script type="text/javascript">
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
minDate: 0,
onClose: function(dateText, inst) {
$d = new Date(inst.selectedYear, parseInt(inst.selectedMonth)+1, 0).getDate();
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
html='';
for(i=1;i<=$d;i++){
console.log(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
d = new Date(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
console.log(d);
n = weekday[d.getDay()];
html += '<div class="datediv">div-'+i+'<br>'+n+'</div>';
}
$('#datecontent').html(html);
}
});
$(document).ready(function() {
$(document).live('click', '.datediv', function() { alert("hello"); });});
});
</script>
Html Code
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<div id="datecontent" id="owl-demo">
</div>
Owl Script
<script src="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/assets/js/jquery-1.9.1.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/owl-carousel/owl.carousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
});
</script>
I got This error TypeError: $(...).datepicker is not a function
How to fix this issue. I think because of Jquery Conflict Only
How to over come on this??
Hope this helps!
You should use the add method in carousel to append items inside carousel.Also use refresh to run the slider after appending.
owl.trigger('add.owl.carousel', ['<div class="datediv">div-'+i+'<br>'+n+'</div>']).trigger('refresh.owl.carousel');
use remove method to remove items from carousel before appending new items.
for (var i =0; i< $('.owl-item').length; i++) {
owl.trigger('remove.owl.carousel', [i]).trigger('refresh.owl.carousel');
}
$(document).ready(function() {
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
minDate: 0,
onClose: function(dateText, inst) {
$d = new Date(inst.selectedYear, parseInt(inst.selectedMonth)+1, 0).getDate();
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
for (var i =0; i< $('.owl-item').length; i++) {
owl.trigger('remove.owl.carousel', [i]).trigger('refresh.owl.carousel');
}
for(i=1;i<=$d;i++){
console.log(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
d = new Date(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
console.log(d);
n = weekday[d.getDay()];
owl
.trigger('add.owl.carousel', ['<div class="datediv">div-'+i+'<br>'+n+'</div>'])
.trigger('refresh.owl.carousel');
}
}
});
$(document).on('click', '.datediv', function() { alert("hello"); });
var owl = $(".owl-demo");
owl.owlCarousel({
margin: 20,
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
});
.owl-item {
-webkit-tap-highlight-color: transparent;
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-touch-callout: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"/>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<div id="datecontent" class="owl-demo">
</div>
I have read helpful answered given By #ghybs Page: “update properties of geojson to use it with leaflet”
but I am stuck to make it wok using a bootstrap popup window too collect data from user and hold it on feature.properties later I will collect multiple data from multiple marker, polygon polyline convert to geojson.
I can collect data form popup but data is showing same for every marker I am creating. feature.properties should different for each markers.
pelase review my code :
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});
map = L.map('map', {
layers: [osm],
center: [31.9500, 35.9333],
zoom: 15
});
var editableLayers = L.geoJson().addTo(map);
map.addControl(new L.Control.Draw({
edit: {
featureGroup: editableLayers
}
}));
map.on('draw:created', function (e) {
var layer = e.layer,
feature = layer.feature = layer.feature || {};
feature.type = feature.type || "Feature";
var props = feature.properties = feature.properties || {};
//layer.feature = {properties: {}}; // No need to convert to GeoJSON.
//var props = layer.feature.properties;
props.action = null;
editableLayers.addLayer(layer);
addPopup(layer);
});
function addPopup(layer) {
var content = document.getElementById('action');
layer.feature.properties.action = content;
/* content.addEventListener("keyup", function () {
layer.feature.properties.action = content;
});*/
/* layer.on("popupopen", function () {
content.value = layer.feature.properties.desc;
content.focus();
});
layer.bindPopup(content).openPopup();*/
layer.on('click', function() {
$('#action').val(layer.feature.properties.action);
//content.value = layer.feature.properties.action;
$('#attributes').modal({'show' : true, backdrop:'static', keyboard:false});
$('#action').val(layer.feature.properties.action);
});
}
document.getElementById("convert").addEventListener("click", function () {
console.log(JSON.stringify(editableLayers.toGeoJSON(), null, 2));
});
#map {
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript" src="https://unpkg.com/leaflet#0.7.7/dist/leaflet-src.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#0.7.7/dist/leaflet.css" type="text/css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Leaflet/Leaflet.draw/v0.3.0/dist/leaflet.draw.css" type="text/css">
<!--js-->
<script type="text/javascript" src="https://cdn.rawgit.com/Leaflet/Leaflet.draw/v0.3.0/dist/leaflet.draw-src.js"></script>
<body>
<div id="map"></div>
<button id="convert">
Get all features to GeoJSON string
</button>
<div class="modal" id="attributes">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Attribute Data</h4>
</div>
<div class="modal-body">
<div class="content-scroll5">
<div class="col-xs-2">
<label for="ex1">ACTION</label>
<input class="form-control" name="action" id="actin" type="text">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
I am trying to develop a mobile application with Ionic framework. It works in the web application, but when it is installed in smartphone, it does not work any more.
code index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" >
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngstorage/ngStorage.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyAXp19GmxccWT5A5vVgtQK5NHCaZDb_W0I">
</script>
</head>
<body ng-app="phonegp">
<div class="tabs tabs-icon-top">
<a class="tab-item" ui-sref="actualite">
<i class="icon ion-document-text"></i>
Actualité
</a>
<a class="tab-item" ui-sref="contact">
<i class="icon ion-star"></i>
Contact
</a>
<a class="tab-item" ui-sref="geo">
<i class="icon ion-location"></i>
Géo Localisation
</a>
<a class="tab-item" ui-sref="config">
<i class="icon ion-gear-b"></i>
Settings
</a>
</div>
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-energized">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons>
<button menu-toggle="left" class="button button-icon ion-navicon"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-item menu-close ui-sref="actualite">Actualite</ion-item>
<ion-item menu-close ui-sref="contact">Contact</ion-item>
<ion-item menu-close ui-sref="geo">Géo Localisation</ion-item>
<ion-item menu-close ui-sref="config">Settings</ion-item>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
code app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
app = angular.module('phonegp', ['ionic','ngCordova','ngStorage'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state("actualite",{
url : "/actualite",
templateUrl : "templates/actualite.html",
controller:"getactualites"
});
$stateProvider.state("infoActualite",{
url : "/infoAlite",
templateUrl : "templates/infoActualite.html",
controller:"infoActualiteCtrl"
});
$stateProvider.state("contact",{
url : "/contact",
templateUrl : "templates/contact.html"
});
$stateProvider.state("geo",{
url : "/geo",
templateUrl : "templates/geo.html",
controller:"GeoCtrl"
});
$stateProvider.state("config",{
url : "/config",
templateUrl : "templates/config.html"
});
//pour afficher page index
$urlRouterProvider.otherwise("actualite");
})
app.factory("StorageService",function($localStorage){
$localStorage = $localStorage.$default({
trajet: []
});
return {
savePosition:function(pos) {
$localStorage.trajet.push(pos);
},
getAllPositions:function(){
return $localStorage.trajet;
}
}
});
app.controller("getactualites",function($scope,$http,$stateParams){
$http.get('http://192.168.1.4/pfe/web/app_dev.php/api/users')
.then(function successCallback( response ) {
$scope.data = response;
}, function errorCallback(response) {
console.log(response);
alert('error');
})
});
app.controller("infoActualiteCtrl",function($scope,$http){
});
app.controller("GeoCtrl",function($scope,$cordovaGeolocation,StorageService){
var counter;
var currentLatitude;
var currentLongitude;
var markers = [];
var options = {
timeout:10000,
enableHighAccuracy:true
};
$cordovaGeolocation.getCurrentPosition(options)
.then(function(position){
currentLatitude = position.coords.latitude;
currentLongitude = position.longitude;
$scope.position = position;
var latLng= new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var mapOptions = {
center: latLng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
theMap = new google.maps.Map(document.getElementById('map'),mapOptions);
$scope.map=theMap;
$scope.newMarker(position,theMap);
$scope.watchPosition(theMap);
},
function(err) { console.log(err); }
);
$scope.watchPosition=function(theMap){
var watchOptions = {
timeout: 2000,
enableHighAccuracy: true
};
watch = $cordovaGeolocation.watchPosition(watchOptions);
watch.then(
null,
function(err) {
//console.log(err);
},
function(position){
//console.log(position);
if ((position.coords.longitude!=currentLongitude) &&
(position.coords.latitude!=currentLatitude)){
$scope.position = position;
$scope.newMarker(position,theMap);
}
}
);
}
$scope.newMarker=function(position,theMap){
latLng= new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude
);
marker = new google.maps.Marker({
position:latLng,
title: "Position"+(++counter),
label: "H"
});
marker.setMap(theMap);
markers.push(marker);
StorageService.savePosition({
lat:position.coords.latitude,
lng: position.coords.longitude
});
}
$scope.showMarker=function(p){
latLng = new google.maps.LatLng(p.lat, p.lng);
marker = new google.maps.Marker({
position:latLng,
label: "H"
});
marker.setMap($scope.map);
markers.push(marker);
}
$scope.hideMarkers=function(){
markers.forEach(function(m){
m.setMap(null);
})
}
$scope.showTrajet= function () {
traj =StorageService.getAllPositions();
traj.forEach(function(p){
$scope.showMarker(p);
});
}
});
code style.css
.contact h5 {
font-weight: bold;
color:#444;
margin-left: 30px;
padding: 8px;
}
.image img {
margin:30px 0 0 40px;
border-radius: 50%;
width:150px;
height:150px;
padding: 10px;
}
.scroll {
height: 100%;
}
#map {
width:100%; height: 100%;
}
.icon {
text-align: center;
padding: 10px;
}
.icon img {
margin-right: 10px;
}
this is screenshot of problemes
enter image description here
Is yout plugins folder in your app's root/main (Same directory as WWW) if not
keep plugins folder in your app's Root directory then create platform with
ionic platform add android
and later app with
ionic build android
try this out
note: replace android with ios in above commands according to your requirement
I am trying to render a jqPlot bar chart using asp.net MVC. Not sure how to build an array on the client side using the data returned from a controller.
I am trying to which is similar to this, http://jsfiddle.net/du8GZ/
#foreach (var d in Model.SampleChart)
{
// What to write here?
}
public class SampleChart
{
public int Count { get; set; }
public string Name { get; set; }
}
public ActionResult BarIn()
{
List<SampleChart> data = new List<SampleChart>();
SampleChart bar;
Random r = new Random();
for (int i = 0; i < 10; i++)
{
bar = new SampleChart();
bar.Count = i;
bar.Name = "Sample " + i.ToString();
data.Add(bar);
}
return View(data);
}
<link class="include" rel="stylesheet" type="text/css" href="#Url.Content("~/scripts/jqplot/css/jquery.jqplot.min.css")" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="#Url.Content("~/scripts/jqplot/excanvas.min.js")"></script><![endif]-->
<script type="text/javascript" src="#Url.Content("~/scripts/jqPlot/jquery.jqplot.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/scripts/jqplot/jqplot.categoryAxisRenderer.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/scripts/jqPlot/jqplot.barRenderer.min.js")"></script>
<div class="example-content">
<!-- Example scripts go here -->
<style type="text/css">
.jqplot-target
{
margin: 30px;
}
.tooltipCss
{
position: absolute;
background-color: #b2b1ac;
color: White;
z-index: 200;
padding: 5px;
border-radius: 5px;
display: none;
}
</style>
<div id="chart2" class="plot" ></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var data = new Array();
var series = new Array();
#foreach (var d in Model.SampleChart)
{
}
plot2 = $.jqplot('chart2', data, {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
barPadding: 10,
barMargin: 15
}
},
series: series,
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
$('#chart2').bind('jqplotDataMouseOver',
function (ev, seriesIndex, pointIndex, data) {
//$('#info2').html('series "' + series[seriesIndex].label + '" point "' + (pointIndex + 5) + '"<br /> value "' + data[1] + '"');
//$('#info2').css({ "left": ev.pageX + 3, "top": ev.pageY })
$('#info2').show();
}
);
$('#chart2').bind('jqplotDataUnhighlight',
function (ev) {
$('#info2').hide();
}
);
});
</script>
<div id="info2" class="tooltipCss"></div>
The array on your client side is actually represented in JSON so all you have to do is create a view model that will hold a representation of your array and dump it in a hidden field as JSON ... like this:
#Html.Hidden("BarGraphData",Json.Encode(Model.BarGraphData))
and then use jQuery to send the data to jqPlot like that:
var columnChartData = $.parseJSON($('#BarGraphData').val());
var plot2 = $.jqplot('chart1', columnChartData ,{....