I have one html file like Map.Html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript" src="http://maps.google.com.mx/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var address = "Ahmedabad, India" //change the address in order to search the google maps
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var infoWindow = new google.maps.InfoWindow({
content: 'Hello'
});
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.open(map, marker);
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
then i load this html file in webbrowser control DocumentText using below code:
using (StreamReader reader = new StreamReader(System.Windows.Forms.Application.StartupPath + "\\Map.html"))
{
_mapHTML = reader.ReadToEnd();
}
webBrowser1.DocumentText = _mapHTML;
but map not load properly.
zoom in/out, Map/Satellite option, Marker are showing but one white layer on map display.
SOLVED -- for me at least.
For some reason, the Webbrowser control is defaulting to a bad version (experimental?). I changed my initialization script to specify the current 3.3 version and everything is back to normal.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.3"></script>
Related
I'm working on ASP.Net MVC and we're using an external .JS file to place all javascript code.
I firstly placed the below Google Map code in the View and it is working nice displaying the map in the view page... but when I sent my code for code-review, code-review folks require me to reference it in the .JS file. I tried so many times to put it in a .JS file but I can't have it displayed in a view.
Seems like they want the google map initialization variable and the google map js script inside the js file airplanDetail.js and, only have the reference in the view page. They want clean code/view page
Can you please assist?
<div class="googleMapAPI">
#{
var googleAPIKey = ConfigurationSettings.AppSettings["CWU_GoogleAPI_Key"];
<script src="https://maps.googleapis.com/maps/api/js?key=#googleAPIKey&callback=initMap" type="text/javascript"></script>
}
So in the ASP.Net MVC view page, at the bottom, there's a the below code that refence to the JS file.
#section Scripts {
#Scripts.Render("~/Scripts/Views/Product/airplanDetail.js")
}
and inside the airplanDetails.js file there's a code looks like the below
$(function () {
Initialize();
});
function Initialize() {
google.maps.visualRefresh = true;
var propertyLatitude = document.getElementById("latitudId").value;
var propertyLongitude = document.getElementById("longitudId").value;
var propertyLocation = new google.maps.LatLng(propertyLatitude, propertyLongitude);
var mapOptions = {
zoom: 14,
center: propertyLocation,
mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var myLatlng = new google.maps.LatLng(propertyLatitude, propertyLongitude);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Location found'
});
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')
}
Try putting the script tag in the section, ie:
<html>
<head>
#Scripts.Render("~/Scripts/Views/Product/airplanDetail.js")
</head>
<body>
</body>
</html>
Let me start out by saying that I am no pro at web scraping. I can do the basics on most platforms, but that's about it.
I am trying to create the foundation for a web application that can helps users reinforce their language learning by generating additional data, metrics, as well as create new tools for self-testing. The Duolingo website is not offering up any sort of API so my next thought for now is just to scrape https://www.duome.eu/. I wrote a quick little scraper but didn't realize that the site was java. In the following example, it is my wish to collect all of the words from the Words tab that contain anchors:
using System;
using HtmlAgilityPack;
using System.Net.Http;
using System.Text.RegularExpressions;
namespace DuolingoUpdate
{
class Program
{
static void Main(string[] args)
{
string userName = "Podus";
UpdateDuolingoUser(userName);
Console.ReadLine();
}
private static async void UpdateDuolingoUser(string userName)
{
string url = "https://www.duome.eu/" + userName + "/progress/";
// Create the http client connection
HttpClient httpClient = new HttpClient();
var html = await httpClient.GetStringAsync(url);
// Store the html client data in an object
HtmlDocument htmlDocument = new HtmlDocument();
htmlDocument.LoadHtml(html);
//var words = htmlDocument.DocumentNode.Descendants("div")
// .Where(node => node.GetAttributeValue("id", "")
// .Equals("words")).ToList();
//var wordList = words[0].Descendants("a")
// .Where(node => node.GetAttributeValue("class", "")
// .Contains("wA")).ToList();
Console.WriteLine(html);
}
}
}
The html object of the above code contains:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="google" value="notranslate">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Duolingo · Podus # duome.eu</title>
<link rel="stylesheet" href="/style.css?1548418871" />
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if("".length==0){
var visitortime = new Date();
var visitortimezone = "GMT " + -visitortime.getTimezoneOffset()/60;
//localStorage.tz = visitortimezone;
//timezone = Date.parse(localStorage.tz);
//timezone = localStorage.tz;
//console.log(timezone);
$.ajax({
type: "GET",
url: "/tz.php",
data: 'time='+ visitortimezone,
success: function(){
location.reload();
}
});
}
});
</script>
</head>
<body>
<noscript>Click here to adjsut XP charts to your local timezone. </noscript>
<!-- Yandex.Metrika counter --> <script type="text/javascript" > (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter47765476 = new Ya.Metrika({ id:47765476, clickmap:true, trackLinks:true, accurateTrackBounce:true }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/47765476" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter -->
</body>
</html>
But if you go to the actual url https://www.duome.eu/Podus/progress/, the site contains a ton of script. So upon inspection the first problem is that I am not getting the html that I see in the browser. The second problem is that if you view source, its nothing like what is in inspect and I don't see anything in source that would lead me to isolate the data from div id="words".
Given my lackluster knowledge of java built web pages, how do I do this, or is it even possible?
You can access dualingo profile data in JSON format via https://www.duolingo.com/users/<username>
eg. https://www.duolingo.com/users/Podus
This should be much easier than trying to scrape the duome profile page manually.
How to populate dropdownlist using WCF Rest Service:
First, this is my code to get service:
service.js
(function (app) {
app.service("GetCategoryService", function ($http) {
this.GetCategory = function () {
return $http.get("http://localhost:51458/ServiceRequest.svc/GetCategory/");
};
});
})(angular.module('entry'));
Entry.Ctrl
(function (app) {
'use strict';
app.controller('entryCtrl', entryCtrl);
entryCtrl.$inject = ['$scope'];
function entryCtrl($scope) {
$scope.pageClass = 'page-entry';
//To Get Category
$scope.Category = function () {
var promiseGet = GetCategoryService.GetCategory();
promiseGet.then(function (pl) { $scope.GetCategory = pl.data },
function (errorPl) {
console.log('Some Error in Getting Records.', errorPl);
});
}
}
})(angular.module('entry'));
This is entry.html
<div class="dropdown">
<select ng-model="Category" ng-options="item.ITEM_TEXT for item in Category"></select>
</div>
WCF Output JSON like:
[{"ITEM_TEXT":"INTERNAL APP"},{"ITEM_TEXT":"INTERNAL IT"}]
I don't know how to passing this to html, what I'm doing like this is not working. please help. thank
Make sure you have set ng-model different from the array name, also inject the service into your controller,
entryCtrl.$inject = ['$scope', 'GetCategoryService'];
DEMO
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
$scope.Category = [{"ITEM_TEXT":"INTERNAL APP"},{"ITEM_TEXT":"INTERNAL IT"}];
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="MainViewController.js"></script>
</head>
<body ng-controller="dobController">
<select ng-model="selected" ng-init="selected = Category[0]" ng-options="item.ITEM_TEXT for item in Category"></select>
</body>
</html>
I have an asp.net mvc4 application, in which i'd like to add a treeview . So i used this Jquery library : graphdracula
<html>
<head>
<!-- jQuery -->
<script type="text/javascript" src="~/Content/Scripts/jquery-1.4.2.min.js"></script>
<!-- The Raphael JavaScript library for vector graphics display -->
<script type="text/javascript" src="~/Content/Scripts/raphael-min.js"></script>
<!-- Dracula -->
<!-- An extension of Raphael for connecting shapes -->
<script type="text/javascript" src="~/Content/Scripts/dracula_graffle.js"></script>
<!-- Graphs -->
<script type="text/javascript" src="~/Content/Scripts/dracula_graph.js"></script>
<script type="text/javascript" src="~/Content/Scripts/dracula_algorithms.js"></script>
<script type="text/javascript">
//Show UCLA CS class dependencies (not complete)
$(document).ready(function () {
var width = $(document).width() -500;
var height = $(document).height();
var g = new Graph();
g.edgeFactory.template.style.directed = true;
g.addEdge("Projet", "Fonction1");
g.addEdge("Fonction1", "Sous Fonction 1.1");
g.addEdge("Fonction1", "Sous Fonction 1.2");
g.addEdge("Projet", "Fonction2");
g.addEdge("Fonction2", "Sous Fonction 2.1");
g.addEdge("Fonction2", "Sous Fonction 2.2");
g.addEdge("Fonction2", "Sous Fonction 2.3");
g.addEdge("Fonction2", "Sous Fonction 2.4");
var layouter = new Graph.Layout.Ordered(g, topological_sort(g));
var renderer = new Graph.Renderer.Raphael('canvas', g, width, height);
});
</script>
</head>
<body>
<div id="canvas"></div>
</body>
</html>
the result is a view like this :
it is good but i need to change each title to a link like this : #Html.ActionLink("Projet", "Modify_Project")
How can i modify my snippet to do this task?
If you are using jQuery.
// on page load
$(function(){
// You need to identify a selector that selects all the titles you want to change..
// Likely they all have a certain class
$('.titleSelector').changeElementType("a");
// Now you probably want to add an href
$('a.titleSelector').attr('href','http://youlinkhere');
});
Here is the plugin.. include it after jquery loads and before your script runs https://stackoverflow.com/a/8584217/602379
(function($) {
$.fn.changeElementType = function(newType) {
var attrs = {};
$.each(this[0].attributes, function(idx, attr) {
attrs[attr.nodeName] = attr.nodeValue;
});
this.replaceWith(function() {
return $("<" + newType + "/>", attrs).append($(this).contents());
});
};
})(jQuery);
I am displaying google map on my asp.net page using jquery.I have Nation name,company name,Address and Longitude and latitude.
Right now i have add all addresses in dropdown,on the basis of dropdown selection i have passed longitude and latitude in code.this part is working as it display map on the basis of latitude and longitude.But i have no longitude and latitude for some comapnies.So i want to use directly address of comapnies to display map.
Here is the code that i have used:
<script src="js/jquery/jquery-1.9.0.min.js"></script>
<!-- <msdropdown> -->
<link rel="stylesheet" type="text/css" href="css/msdropdown/dd.css" />
<script src="js/msdropdown/jquery.dd.js"></script>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places">
</script>
</head>
<body onload="initialize()">
<select id="countries" style="width:300px;" onchange="updateMap(this.options[this.selectedIndex].value)">
<option value='TVSH - Rruga Ismail Quemali 11>TVSH - Rruga Ismail Quemali 11, Tirana</option></select>
function updateMap(selectControl) {
alert(selectControl);
switch (selectControl) {
case 'TVSH - Rruga Ismail Quemali 11, Tirana':
var polyline = new google.maps.Polyline({
path: [
new google.maps.LatLng(41.321102, 19.823112)],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
var latLng = new google.maps.LatLng(41.321102, 19.823112)
break;
default:
break;
}
initialize(polyline, latLng);
}
function initialize(polyline, schoolLatLng) {
var myLatLng = schoolLatLng;
var myOptions = {
zoom: 13,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
polyline.setMap(map);
}
Now map is displaying on the basis of latitude and longitude.Is there any way so i can directly show map on the basis address.I have address of all comapnies like this:EURONEWS - 60, chemin des Mouilles - 69130 Lyon-Écully, France
Can i show map on the base of this address.Please ask me more description if you need.
You can do something like:
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': 'chemin des Mouilles - 69130 Lyon-Écully, France'}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
But watch out cause the geocoder is asynchronous.
https://developers.google.com/maps/documentation/javascript/geocoding
Or you could check these 2 services for alternatives. I have most of the data printing out that they send back to you, just hit the find me button. But pull your console up to see it all.
Codepen.io Example
You can use Geocoding API, the API purpose is exactly the transformation of an adress into coordinates, then with this coordinates you can render the map, as you already did.
Example:
var geocoder = new google.maps.Geocoder();
//convert location into longitude and latitude
geocoder.geocode({
address: 'chemin des Mouilles - 69130 Lyon-Écully, France'
}, function(locResult) {
var lat1 = locResult[0].geometry.location.lat();
var lng1 = locResult[0].geometry.location.lng();
});