Adding default map events throws error "map instance required" - here-api

I'm trying to add the default mouse panning behavior to the map, but when trying to create an instance of MapEvents like this:
var mapEvents = new H.mapevents.MapEvents(map);
var behavior = new H.mapevents.Behavior(mapEvents);
I get this error:
Uncaught Error: events: map instance required
I'm developing an Angular app but i tried with a plain HTML page and the same happens.
Here is the code i'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body>
<div id="map" style="height: 500px; width: 500px;">
</div>
<script>
var platform = new H.service.Platform({
'apikey': 'REPLACED'
});
var defaultLayers = platform.createDefaultLayers();
var mapElement = document.getElementById('map');
var map = new H.Map(
mapElement,
defaultLayers.vector.normal.map,
{
zoom: 5,
center: {
lat: 0,
lng: 0
},
pixelRatio: window.devicePixelRatio || 1
}
)
console.log(map)
var ui = H.ui.UI.createDefault(map, defaultLayers)
var mapEvents = new H.mapevents.MapEvents(map);
var behavior = new H.mapevents.Behavior(mapEvents);
</script>
</body>
</html>
Can anyone else reproduce this issue?


You need to remove duplicated scripts importing.
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>

Related

aceeditor with vue3 without webpack(without build step)

I am trying to use ace editor without webpack(without build step) in vue 3 CDN based build. but was unable to find a suitable library which works well with vue3.
Here is the code without ace editor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue 3 Quickstart</title>
<link rel="icon" href="./favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue#3/dist/vue.global.prod.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div id="app">
ABC
</div>
<div id="counter"> Counter: {{ counter }} </div>
<script type="module">
const Counter = {
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}
Vue.createApp(Counter).mount('#counter');
</script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
</body>
</html>
Ref of library that can be used : https://www.npmjs.com/package/vue3-ace-editor

Owl Carousel not working with ASP.NET Blazor

I have been trying to make this owl carousel work.
I am not getting any error but the carousel if not loading. I tried the solution I found on StackOverflow for Bootstrap carousel but it did not work for me. I also tried to use pure CSS carousel but it will be static kind of thing and I want the carousel to work dynamically.
Index.razor
#page "/"
#using TBS.Data;
#inject IJSRuntime JsRuntime;
#*#inject IComponentContext context;*#
#inject NavigationManager UriHelper;
#inject MediaService MediaService;
#inject ContentService ContentService;
<div class="container hero-section">
<div class="owl-carousel owl-theme slide">
<div class="hero-image item">
<img src="images/here-image.png" alt="hero-img" class="img-fluid">
<div class="hero-details">
<h2>MATT RISINGER</h2>
<h6>Home Builder. Austin, TX.</h6>
<button>EXPLORE CHANNEL</button>
</div>
</div>
<div class="hero-image item">
<img src="images/here-image.png" alt="hero-img" class="img-fluid">
<div class="hero-details">
<h2>MATT RISINGER</h2>
<h6>Home Builder. Austin, TX.</h6>
<button>EXPLORE CHANNEL</button>
</div>
</div>
</div>
</div>
_Host.cshtml
#page "/"
#namespace TBS.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Build Show</title>
<base href="~/" />
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="style.css">
<environment include="Development">
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="css/bootstrap/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
</environment>
<link href="css/site.css" rel="stylesheet" />
<link href="css/showvideo.css" rel="stylesheet" />
<link href="css/default.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://cdn.syncfusion.com/ej2/17.2.35/material.css" rel="stylesheet" />
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-36173959-17"></script>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
<script src="https://cdn.syncfusion.com/ej2/17.2.35/dist/ej2.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/17.2.35/dist/ejs.interop.min.js"></script>
<script type="text/javascript" src="js/indexedDb.Blazor.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<app>
#(await Html.RenderComponentAsync<App>(RenderMode.Server))
</app>
<script src="_framework/blazor.server.js"></script>
<script src="_content/BlazorStrap/blazorStrap.js"></script>
<script src="_content/BlazorStrap/popper.min.js"></script>
#*<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>*#
<script type='text/javascript'>
(function ($) { window.fnames = new Array(); window.ftypes = new Array(); fnames[0] = 'EMAIL'; ftypes[0] = 'email'; fnames[1] = 'FNAME'; ftypes[1] = 'text'; fnames[2] = 'LNAME'; ftypes[2] = 'text'; fnames[3] = 'ADDRESS'; ftypes[3] = 'address'; fnames[4] = 'PHONE'; ftypes[4] = 'phone'; }(jQuery)); var $mcj = jQuery.noConflict(true);
</script>
<script src="js/custom.js">
</script>
<script src="js/owl.carousel.min.js"></script>
<script>
$('.slide').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
autoplay: true,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
});
$('.slide1').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
});
$('.slide2').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
});
$('.slide3').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
});
</script>
</body>
</html>

I had a similar issue, i figured it out that to use JavaScript library you need to use JInterop. So after referencing all required library, i created a js file in my root folder wwwroot called main.js, and i added the reference to my index.html file like this
<script src="main.js"></script>
Inside this main.js file i created a function that contains all the javascript code i need to run my slider. So the code inside main.js file looks like this.
(function($) {
'use strict';
window.sliderFunctions = {
startSlider: function () {
/*============ All the code or function you need for your slider to run goes here ============*/
--code--
}
}}
Then i opened my app.razor file, then injected JSRuntime like so
#inject IJSRuntime JSRuntime
then still in my app.razor file, i added the following code
#code {
protected async override Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeAsync<string>("sliderFunctions.startSlider", null);
//return base.OnAfterRenderAsync(firstRender);
}}
What simple happened is, this allows to run all javascript code after Blazor is done rendering.

Fullcalendar is not syncing with Google Calendar

I have done everything according to the documentation provided on https://fullcalendar.io/docs/google-calendar
I created a new calendar for this specific purpose.
I have purposely left the API key and calendarID blank
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script src='fullcalendar/gcal.js'></script>
<script>
$(function () {
$('#calendar').fullCalendar({
googleCalendarApiKey: '',
events: {
googleCalendarId: ''
}
});
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Solved Check comments for answer

Tabletool with datatable

I using below code to add export functionality in datatable. i am unable to see export button, i am using master page. can anybody give some valuable remarks
$(document).ready(function () {
$('#tblOscarNominees').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [[4, "desc"]],
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"aButtons": [
"copy", "csv", "xls", "pdf",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": ["csv", "xls", "pdf"]
}
]
}
Below is the reference i set in master page
<link href="DataTables/media/css/TableTools_JUI.css" rel="stylesheet" type="text/css" />
<link href="DataTables/media/css/TableTools.css" rel="stylesheet" type="text/css" />
<link href="DataTables/css/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
<script src="../DataTables/js/jquery.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery.dataTables.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery.dataTables.editable.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery.jeditable.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery-ui.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<script src="../DataTables/js/jquery.dataTables.columnFilter.js" type="text/javascript"></script>
<script src="DataTables/media/js/TableTools.js" type="text/javascript"></script>
<script src="DataTables/media/js/ZeroClipboard.js" type="text/javascript"></script>

conflict in Lightbox and Easing Slider

I am facing conflict issues in both functionalities. If I use the //for slider code above then, lightbox works and easyslider wont work and vice-versa. What is the solution to get it done ?
I am using following code in the header
//for lightbox
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
//for slider
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>

Resources